如何使用CSS不透明度让IE8中的背景流血？
[英]how to use CSS opacity to let background bleed through in IE8?
问题描述
I have an HTML page with a pink background image. 
我有一个带有粉红色背景图像的HTML页面。 I want to define a DIV on the page for text, but I want the background to show in the DIV much paler, almost white. 我想在页面上为文本定义DIV，但我希望背景在DIV中显示的颜色要浅得多，几乎是白色。 I tried this, but it doesn't seem to work on IE8. 我试过了，但是在IE8上似乎不起作用。
My HTML... 我的HTML ...
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="div1">
testing
</div>
</body>
</html>
and here's my CSS file ... 这是我的CSS文件...
body
{
background-image:url('back.jpg');
background-repeat:repeat;
}
.div1
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
background: #ffffff;
}
Any ideas? 有任何想法吗？
3 个解决方案
解决方案1
2 已采纳 2012-02-13 13:38:57
The thing you have to keep in mind is that the opacity property will affect the opacity of the entire element, including its text/children. 您要记住的是，opacity属性将影响整个元素（包括其文本/子元素）的不透明度。 If you want to affect JUST the background, you will need to approach it in a different way. 如果只想影响背景，则需要以不同的方式进行处理。
You could use RGBA for modern browsers: 您可以将RGBA用于现代浏览器：
.div1 {
background-color: rgba(255,255,255, .4);
}
Then, in a separate IE stylesheet (using conditional comments or similar method): 然后，在单独的IE样式表中（使用条件注释或类似方法）：
.div1 {
background: transparent url(white_trans.png);
}
You would need to make a PNG-24 image, 1px x 1px, that was just simply white reduced to 40% opacity. 您将需要制作一个1px x 1px的PNG-24图像，只是将白色降低到40％的不透明度。 That will work in IE7 & 8. 它将在IE7和8中工作。
解决方案2
1 2012-02-13 13:49:36
您应该在.div1块中添加zoom: 1声明。
解决方案3
1 2012-02-13 14:26:56
If you are using a plain (solid) color as background, then, I would suggest you to just use a paler pink for your DIV. 如果您使用纯色（纯色）作为背景，则建议您为DIV使用浅粉色。
This will create the illusion of opacity. 这将造成不透明的幻觉。 And more importantly, you will not face issues with some browsers. 更重要的是，您将不会遇到某些浏览器的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.