CSS with transparent background and opaque text on the background perfect solution

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,

HTML code

2. <div class="Toumingdiv">
4. <div>
6. <H1> This is the transparent layer which is transparent layer which is transparent layer which is transparent
8. This is the transparent layer which is transparent layer which is transparent layer which is transparent layer
10. </H1>
12. </div>
14. <p>
16. This is a transparent layer, but the text and pictures above are opaque and compatible with Ie7,ie8,ie9,ie10,ff,chrome
18. </P>
20. <img src="bg.jpg"/>
22. </div>

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

  
  
 
   
. toumingdiv{
 
   
Filter:alpha (opacity=60); 
 
   
opacity:0.6;
 
   
}
 
  
 
 
. 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
HTML code
 
 

  
  

  
. toumingdiv{
  
  

  
width:800px;
  
  

  
min-height:300px;
  
  

  
Color: #fff;
  
  

  
Background:rgba (0,0,0,0.6);
  
  

  
Background: #000 \9;/*css Hack, 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 *  /
  
  

  
}
  
  

  
. Toumingdiv p,
  
  

  
. Toumingdiv Div,
  
  

  
. Toumingdiv img{
  
  

  
position:relative;
  
  

  
/* or absolute to make the text opaque, or to
  
  

  
Compatible with IE9,IE8,IE7 background transparent text opaque effect */
  
  

  
}
 
 
. 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);/* Only valid for Ie7,ie8 */}.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:
HTML code
 
 

  
  
 
   
Background: #000 9;/*css Hack, 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 *  /
 
  
 
 
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 for IE7 , IE8 effective */
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 with transparent background and opaque text on the background perfect solution