思路主要是
IE9+ 谷歌 火狐等使用rgba(0,0,0,0.5)来确定透明度 前三个值是RGB值 可以直接参考PS里对应的值 最后一个是透明度
例子 background：rgba(255,255,255,0.5);
然后去兼容IE6-IE8
ie6-ie8使用hack
@media \0screen\,screen\9{
.bg_opacity{
background:rgb(255,255,255);//或者#000
filter:Alpha(opacity=50);//设置整体透明度
position:static;//恢复默认 不让下面的文字继承透明度
zoom:1
}
//这里必须加上下级文字 position:relative;
.bg_opacity p{
position:relative;
}
}
下面是完整的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="bg_opacity">
<p>背景颜色透明，字体不会透明属性</p>
</div>
<style type="text/css">
.bg_opacity{
width: 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 \0screen\,screen\9{
.bg_opacity{
background-color: #007531;
filter:Alpha(opacity=50);
position: static;
zoom: 1;
}
}
</style>
</body>
</html>
