Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "what are the commonly used CSS transparency properties". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The code is as follows:

. mask-layer {

Filter:alpha (opacity=50)

-moz-opacity:0.5

-khtml-opacity:0.5

Opacity:0.5

}

The above attributes are:

The code is as follows:

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

Filter:alpha (opacity=50); this is set for IE6, available values are 0-100, the other three 0-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.

CSS Transparency inheritance problem

However, the transparency attribute of CSS involves an inheritance problem. When transparency is set for the parent element, the child element will automatically inherit its transparency, such as an effect like this:

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

In the case where the child element is text, my solution is generally to ignore how much you can see. Another compromise is to specify a relatively darker color for the text child elements. 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.

Another way is to separate the transparent layer, as shown in the following code, first .mod sets position:relative; and then .mask-layer sets position:absolute;z-index:1; and finally .title sets position:absolute;z-index:2

The code is as follows:

Xiao Qingxin, do you like it?

This is the end of the content of "what are the commonly used CSS transparency properties". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.