How to achieve transparency and compatibility with mainstream browsers in CSS

Editor to share with you how CSS is transparent and compatible with mainstream browsers, I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article. Let's learn about it.

Transparency often produces good visual effects on web pages. Below is the CSS transparent code compatible with mainstream browsers.

Transparent_class {filter:alpha (opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity:0.5;}

Filter:alpha (opacity=50): this is set for IE6. Values range from 0 to 100. the other three are 0 to 1.

-moz-opacity:0.5; this is to support some older versions of Mozilla browsers.

-khtml-opacity: 0.5; this is to support some older versions of Safari browsers.

Opacity: 0.5; this is the most important because it is the CSS standard. This attribute supports firefox, Safari and Opera.

CSS Transparency inheritance problem

For example, the effect picture of lady.qq.com

However, the transparency attribute of CSS involves an inheritance problem. When transparency is set for the parent element, the child element automatically inherits its transparency.

Even if you specify a transparency of 1 for the child element, it is invalid.

For cases where child elements are literals

There are three solutions.

one. If you can make do with it, just let it go for the time being.

two. Specify a relatively darker color for the text child element. That is, when the child element inherits transparency, the resulting text color is exactly what you want.

The premise is that the color may be deepened, and the values of color and transparency need to be calculated in detail.

three. Set up separate layers for transparency and text, that is, a separate layer for transparency. Then the layer of the text is covered on it.

The above is all the content of the article "how CSS achieves transparency and is compatible with mainstream browsers". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!