css背景透明文子不透明,CSS 实现背景透明 内容文字不透明 显示

思路主要是

IE9+ 谷歌 火狐等使用rgba(0,0,0,0.5)来确定透明度 前三个值是RGB值 可以直接参考PS里对应的值 最后一个是透明度

例子 background：rgba(255,255,255,0.5);

然后去兼容IE6-IE8

ie6-ie8使用hack

@media screen\,screen9{

.bg_opacity{

background:rgb(255,255,255);//或者#000

filter:Alpha(opacity=50);//设置整体透明度

position:static;//恢复默认 不让下面的文字继承透明度

zoom:1

}

//这里必须加上下级文字 position:relative;

.bg_opacity p{

position:relative;

}

}

下面是完整的实例

背景颜色透明，字体不会透明属性

.bg_opacity{

200px;

height: 300px;

margin: 0px auto;

/*ie9+ 谷歌 火狐 safari4+*/

background-color: rgba(0,117,49,0.5);

}

.bg_opacity p{

font-weight: bold;

display: block;

position: relative;

}

/*ie6-ie8*/

@media screen\,screen9{

.bg_opacity{

background-color: #007531;

filter:Alpha(opacity=50);

position: static;

zoom: 1;

}

}