Css implements background transparency, text opacity, and css implements background opacity

Css implements background transparency, text opacity, and css implements background opacity

The following three methods are usually used to implement transparent css: The Opacity is 80%.

• Opacity of css3: x, x values from 0 to 1, such as opacity: 0.8
• Rgba (red, green, blue, alpha) of css3, the value of alpha ranges from 0 to 1, such as rgba (255,255,255,0.8)
• IE exclusive filter: Alpha (opacity = x). The value of x ranges from 0 to 100, for example, filter: Alpha (opacity = 80)

Css3 Opacity

Compatibility: not supported by IE6, 7, and 8, both IE9 and later versions and standard browsers

Usage instructions: Set the opacity ElementAll descendant elements will be transparent togetherIt is generally used to adjust the overall opacity of an image or module.

<! DOCTYPE html> 
The entire module is transparent after opacity is used, as shown below:

The opacity is used to implement "background transparency and text opacity"Not available.
Rgba of css3
Compatibility: not supported by IE6, 7, and 8, both IE9 and later versions and standard browsers

Usage Description: sets the opacity of the color, which is generally used to adjust the opacity of background-color, color, box-shadow, and so on.
<! DOCTYPE html> 
Rgba is used in background-color. In a standard browser, the background is transparent and the text is not transparent:

It is amazing that IE6 and some IE 7 kernel browsers (such as QQ browsers) will read rgba, and the color after resolution is transparent. In fact, it should be null.

The opacity is used to make the background transparent, and the text is not transparentDesirable.
IE exclusive filter: Alpha (opacity = x)
Instructions for use: the IE browser is exclusive and has many problems. This article uses setting the background transparency as an example, as shown below:
<! DOCTYPE html> Fully compatible solution
The above three points show that the transparent background text is not transparent, and the available attributes include the filter: Alpha exclusive filter of rgba and IE. Its compatibility is shown in:

For IE6, 7, and 8 browsers, we can use fiter: Alpha and rgba for standard browsers. The problem is that both attributes of IE9 are supported, when used together, the opacity will be reduced repeatedly...
So, how can we use fiter: Alpha only for IE6, 7, and 8? I wrote "CSS hack sorting" two years ago. I also made some updates to the latest version. I found the hack related to IE and found a solution that only supports IE 6, 7, and 8, as shown below:
/* Only supports IE6, 7, 8 */@ media \ 0screen \, screen \ 9 {...}
OK. All problems are solved. The Code is as follows:
<! DOCTYPE html>