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

 

思路主要是

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>

　　

posted @ 2015-07-23 14:49  星耀学园  阅读(1204)  评论(0)  编辑  收藏  举报