我有一个带有CSS属性的div,如下所示:
div.header {
opacity:0.4;
filter:alpha(opacity=40);
background:#000;
width:300px;
height:300px;
}
问题是这个div里面的内容也有相同的透明度。我怎样才能让背景颜色/ div显示透明度而不影响div内的内容?
答案 0 :(得分:4)
您可以使用rgba
颜色:
div.header {
background:rgba(0,0,0,0.4);
width:300px;
height:300px;
}
答案 1 :(得分:3)
您可以在后台使用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位数。
答案 2 :(得分:0)
您可以尝试使用rgba background: rgba(0, 0, 0, 0.6);
设置背景,其中0.6
就像不透明度一样。或者将不透明度的背景放在某个div中,然后在该div内部创建另一个包含内容且没有不透明度的div。