web前端技术杂谈--css篇(2)--实现图层或图片透明而其上的内容不透明

最新推荐文章于 2024-04-27 05:30:49 发布

weixin_34375251

最新推荐文章于 2024-04-27 05:30:49 发布

阅读量338

点赞数

文章标签：前端 python ViewUI

原文链接：https://my.oschina.net/u/1403185/blog/339667

版权

2019独角兽企业重金招聘Python工程师标准>>>

代码如下：

html：

<div class="touMingDiv">
    <div>
        <h1>这是透明的层这是透明的层这是透明的层这是透明的层
            这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层
        </h1>
    </div>
    <p>
        这是透明的层,但上边的文字和图片均不透明，兼容ie7,ie8,ie9,ie10,FF,Chrome
    </p>
</div>

css：

 .touMingDiv{
            width:800px;
            min-height:300px;
            color:#fff;
            background:rgba(0,0,0,0.7);//此句只对chrome，FF有效
            background:#000 7;
            /*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/
            /*filter:Alpha(opacity=70);*/
            /*只对ie7,ie8有效*/
        }
        .touMingDiv p,
        .touMingDiv div,
        .touMingDiv img{
            position:relative;
            /*或者是absolute，都可以使文字不透明，这样做还是为了
            兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/
        }

希望大家多多点评!!

转载于:https://my.oschina.net/u/1403185/blog/339667