CSS to achieve transparent background and text opaque on the background

In our design to make some Web pages may use the translucent effect, first we may think of PNG image processing, of course, this is a good way, the only compatibility problem is IE6 under the bug, but this is not difficult, plus a section of JS processing on the line. But if we need a translucent mask of the pop-up layer, such as landing box, registration box, hints, etc., this may require the entire page to be covered by a translucent mask layer, then such as with the background tile, this moment may not be a good way, the picture will affect the loading speed, A small picture will also increase the amount of page rendering calculation, then you may need to use a CSS filter.

If there is an example: "There is a div block, this div is black translucent, but the contents of this div to remain intact, not transparent", then what should we do?

If we write this in the HTML section,

1234567891011

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

For CSS, we might be writing this.

1234	.touMingDiv{    filter:Alpha(opacity=60);    opacity:0.6;}

But after testing we found that not only the div container translucent, even the text inside the div and pictures are transparent. This effect occurs because the properties of these filters have been inherited to child elements.

We can use the following hair method to achieve

123456789101112131415

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

Note that above Background:rgba (0,0,0,0.6); only for ie9,ie10,ff,chrome ... such as valid, not including IE6,IE7,IE8, so with these few lines of code:

12	background:#0009;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/filter:Alpha(opacity=60);/*只对ie7,ie8有效*/

You also set the relative or absolute property on the child-level elements to make the background transparent and the text and picture above the background appear normally.

But the code here is resolutely not suitable for IE6, it is recommended for IE6 to use PNG picture bar, and then use JS to do a bit of processing

CSS to achieve transparent background and text opaque on the background