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;

　　　　}

下面是完整的实例

<!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{
         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;

        }

    }

</style>
</body>
</html>

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

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