CSS Changes background transparency

Transparency often produces good web visuals, with CSS transparent code compatible with mainstream browsers:
. Transparent{filter:alpha (opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9; opacity:0.9;}

Several of the above properties are:

opacity:0.9; This is the most important because it is a CSS standard. This property supports Firefox, Safari, and Opera.
Filter:alpha (opacity=90); This is set for IE6, the value is 0-100, the other three 0 to 1.
-moz-opacity:0.9; This is to support some of the older versions of Mozilla browser.
-khtml-opacity:0.9; This is to support some of the older versions of the Safari browser.

CSS Transparency Inheritance Issues

However, the transparency property of CSS involves an inheritance problem, and when the transparency is set for the parent element, the child element automatically inherits its transparency, such as one of the effects on this site:

It is also invalid for you to specify a transparency of 1 for the child element.

For child elements is the case of text, my solution is generally if you can see how much, regardless. Another tradeoff is to specify a relatively deeper color for the text element. In other words, when the child element inherits the transparency, the resulting text color is exactly what you want. The premise is that this color also has the possibility of deepening, and the need for detailed calculations of color and transparency values.

There is also the assertion that "elimination of transparency inheritance" is not very accurate, as far as I know, there is no way to abolish the transparency inheritance. It can only be said that when you want to implement "multiple element overrides, only allow the specified element to be transparent," some hack may be used.

Search, find a good way to achieve this effect
A question about the degree of transparency of inheritance, interested friends can see. The principle is simple, add an empty element as a transparent layer, and the element that does not want to be transparent but implements the overlay effect is a sibling element. The parent element uses position:relative positioning; Two sub-elements use position:absolute positioning to achieve coverage.

CSS Changes background transparency