CSS for transparent background, text opaque, compatible with all browsers

How to achieve transparent background, text opaque, compatible with all browsers?

We usually adjust the opacity:

There are 3 ways to implement a transparent CSS method, and the following is a 80% notation for opacity:

• The value of CSS3 's opacity:x,x is from 0 to 1, such as opacity:0.8
• CSS3 Rgba (red, green, blue, alpha), alpha values from 0 to 1, such as Rgba (255,255,255,0.8)
• IE exclusive filter filter:alpha (OPACITY=X), x value from 0 to 100, such as Filter:alpha (OPACITY=80)

of CSS Opacity

Compatibility: IE6, 7, 8 not supported, IE9 and above and standard browsers are supported:

Instruction for use: Set all descendant elements of the opacity element to be transparent with each other, generally used to adjust the overall opacity of the picture or module

<! DOCTYPE html>
After using opacity, the entire module is transparent, showing the following:
Then using opacity to achieve the "background transparent, text opaque" is not available .
The Rgba of CSS
Compatibility: IE6, 7, 8 not supported, IE9 and above and standard browser support
Instructions for use: Set the opacity of the color, which is generally used to adjust the opacity of background-color, color, Box-shadow, and so on.
<! DOCTYPE html>
Use RGBA in Background-color, standard browser, background transparent, text opaque, show as follows:
This kind of writing is can realize the background transparent, the text is opaque, only IE8 and the lower version does not support.
IE exclusive filter filter:alpha (OPACITY=X)
Instructions for use: IE browser-specific, a lot of questions, this article to set background transparency for example, as follows:

 
  

  
   
 
    
only supports IE6, 7, 8, 9, and is abolished in the IE10 version
 
    
In IE6, 7, you need to activate the haslayout attribute of IE (for example: *zoom:1 or *overflow:hidden) and let it read Filter:alpha
 
    
In IE6, 7, 8, the Filter:alpha element is set, the parent element is set Position:static (the default property), and its child elements are relative positioning, which makes the child elements opaque
 
   
 
  
<! DOCTYPE html>
Fully-compatible solution
Above 3 point analysis, set transparent background text opaque, can be used by the properties of Rgba and IE exclusive filter filter:alpha
For IE6, 7, 8 browsers, we can use Fiter:alpha, for standard browsers we use RGBA, then the problem, IE9 browser 2 properties are supported, together with the use will repeatedly reduce the opacity ...
So, how to only IE6, 7, 8 using Fiter:alpha How to achieve, find only support IE 6, 7, 8 of the scheme, as follows:
/* only supports IE6, 7, 8 */@media \0screen\,screen\9 {...}
So the browser code is as follows:
<! DOCTYPE html>
Some netizens think this is not necessary, I think there is no need, this is only to achieve a transparent background, text is not transparent a way of compatibility, there are other solutions.
For example: Two div placed in the same position on the line, a transparent div, a text div, can also be achieved, is the need to locate.
If you want to be compatible with the lower version of the browser, I usually cut transparent pictures, placed in the background, so that neither write so many styles, and need not be positioned to solve. (If the background is not a single transparent color, only cut into pictures).
CSS for transparent background, text opaque, compatible with all browsers