我有一个CSS属性的一个div像这样:CSS透明度影响内容
div.header {
opacity:0.4;
filter:alpha(opacity=40);
background:#000;
width:300px;
height:300px;
}
的问题是,是此DIV也有同样的透明的内容。我怎么才能让背景颜色/ div显示透明度而不影响该div内的内容?
我有一个CSS属性的一个div像这样:CSS透明度影响内容
div.header {
opacity:0.4;
filter:alpha(opacity=40);
background:#000;
width:300px;
height:300px;
}
的问题是,是此DIV也有同样的透明的内容。我怎么才能让背景颜色/ div显示透明度而不影响该div内的内容?
您可以在后台使用rgba
:
div.header {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.4);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
}
的颜色IE由下式计算:
Math.floor(0.4 * 255).toString(16); // 0.4 is your desired opacity
它给你66
使成为第2位的颜色。
您可以使用rgba
颜色:
div.header {
background:rgba(0,0,0,0.4);
width:300px;
height:300px;
}
你可以尝试设置背景RGBA background: rgba(0, 0, 0, 0.6);
其中0.6
是状混浊。或者将不透明度的背景放在某个div中,然后在该div中创建另一个带有内容且没有不透明度的div。
+1你应该声明'rgb'财产_before_的RGBA的浏览器不这样做'rgba',你可以使用[渐变滤镜](http://msdn.microsoft.com /en-us/library/ms532997%28VS.85%29.aspx)对于不支持'rgba'的IE版本 – steveax 2012-08-10 01:19:20