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

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

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.

Background-color: #000000;/* IE6 and partial IE7 kernel browser (such as QQ browser) color is overwritten */

Background-color:rgba (0,0,0,0.2); /* IE6 and parts of IE7 kernel browser (such as QQ browser) will read, but resolved to transparent */

Use RGBA in Background-color, standard browser, background transparent, text opaque

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

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:

1. only supports IE6, 7, 8, 9, and is abolished in the IE10 version
2. 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
3. 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

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