Examples of how CSS makes background transparent and text opaque

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,

<div class= "Toumingdiv" >      <div>          
For CSS, we might be writing this.

. 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

. toumingdiv{      width:800px;      min-height:300px;      Color: #fff;      Background:rgba (0,0,0,0.6);      Background: #000 9;/*css Hack, can only IE9 the following browser ie6,ie7,ie8 effective, no side ie10,ff,cherome will lose transparency effect *      /Filter:alpha (OPACITY=60);/* Valid for IE7,IE8 only *  }  . toumingdiv p,  . Toumingdiv Div,  . Toumingdiv img{      position:relative;      /* or absolute, can make the text opaque, this is to be compatible with the background      of the ie9,ie8,ie7 under the transparency of the text on the background opaque effect */  }
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:

Background: #000 9;/*css Hack, can only IE9 the following browser ie6,ie7,ie8 effective, no side ie10,ff,cherome will lose transparency effect *  /Filter:alpha (opacity=60); * Only valid for 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.