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

• IE6 and some IE7 kernel browsers will read Rgba
• Compatible processing of IE exclusive filter filter:alpha
• Transparent background, text opaque full compatibility scheme

To test your browser:

VirtIE6, virtual machine under XP IE6, pure IE8, pure IE8 under the QQ browser, WIN7 under the IE 9.0.32, WIN8 under the IE 10.0.21, Chrome 38.0, QQ browser 8.0-ie10.0.5, Safari 5.1.7, Opera 25.0

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

What we usually say about adjusting transparency, in fact, is to adjust the opacity in the style, as in the example:

Open PS, on the layers panel, you can see a menu that sets the opacity of the layer, from 0% (fully transparent) to 100% (completely opaque).

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)

CSS3 's Opacity

Compatibility: IE6, 7, 8 not supported, IE9 and above and standard browser support

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 .
CSS3 's Rgba
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.
<! ><TITLE>CSS3 of DOCTYPE Html>
Use RGBA in Background-color, standard browser, background transparent, text opaque, show as follows:
Very wonderful is, IE6 and part of the IE7 kernel browser (such as QQ browser) will read Rgba, after parsing the color is transparent, in fact, it should be null
It is advisable to use opacity for background transparency and text opacity.
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, the setting of transparent background text opaque, can be used by the properties of Rgba and IE exclusive filter filter:alpha, the compatibility as shown:
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 do you use Fiter:alpha for IE6, 7, and 8? 2 years ago wrote "CSS Hack finishing" a article, the latest I also made a point update, there is IE related hack, find only support IE 6, 7, 8 of the scheme, as follows:
/* only supports IE6, 7, 8 */@media \0screen\,screen\9 {...}
OK, all the problems are solved, all the code is as follows:
<! DOCTYPE html>
CSS for transparent background, text opaque, compatible with all browsers