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

This article mainly explains "how to deal with translucent style in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to deal with translucent style in CSS.

The element container is transparent

.div {

Mainstream browsers such as opacity:0.5;/*Firefox, Chorme and Opera recognize * /

Filter:alpha (opacity=50); / * IE6 and above IE browsers identify * /

}

Description:

1. OpacityVR * values range from 0 to 1, increasing from fully transparent to opaque, and opaque by default after exceeding 1.

The value of 2.filter:alpha (opacity=*) is between 0 and 100, which is the same as above.

3. After using this attribute, all child elements in the element container are inherited, that is, all are followed by translucency.

Second, the element background is transparent.

.div {

Background:rgba / * mainstream browsers such as Firefox, Chorme and Opera identify * /

Filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr=#7f000000,endColorStr=#7f000000); / * IE6 and above IE browsers identify * /

}

Description:

1.background:rgba (mn) where m is the rgb color value and n is transparency. The value is between 1 and 100, which is the same as the first above.

2.startColorStractimendColorationn where m and n are composed of two parts, the first two bits are transparency, and the last six bits are sixteen-color values. If 7f represents 0.5% transparency, 000000 is black (cannot be abbreviated to 000)

3. In the second point, it is uniformly transparent in Mainn and gradually transparent in ≠. A set of transparency data corresponding to the first two values is attached below, such as the rgb transparency value-IEfilter value:

0.1 Mueller 19 | 0.2 Mueller 33 | 0.3 Mueller 4c | 0.4 Mueller 66 | 0.5 Mueller 7f | 0.6 Mueller 99 | 0.7--b2 | 0.8--c8 | 0.9--e5 |

Third, the picture is transparent

Explanation: in fact, it is aimed at IE6. IE7 and above browsers directly support translucent images. There are many methods, and the awesome people have summed up nearly seven or eight of them. The one I often use is the following:

1. First of all, go to the next png.js online.

two。 At the bottom of your page, load this paragraph between the body closing tag and the html closing tag:

3. Then make sure the path is not written wrong. Finally, add the name of the image element or the name of class or ID that needs translucent processing in DD_belatedPNG.fix (").

Thank you for reading, the above is the content of "how to deal with translucent style in CSS". After the study of this article, I believe you have a deeper understanding of how to deal with the translucent style in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.