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

 但願你們多多點評!!