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

代码如下：

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下背景透明而而背景上的文字不透明的效果*/
        }

 希望大家多多点评!!