Parsing IE, FireFox, Opera browsers support Alpha transparency method

This chapter will analyze how IE, FireFox, and Opera browsers support Alpha transparency. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Please look at the following code first:

filter:alpha(opacity=50);       /* IE */  
-moz-opacity:0.5;              /* Moz + FF */  
opacity: 0.5;           /* 支持CSS3的浏览器（FF 1.5也支持）*/

Simple explanation, IE uses the private attribute filter:alpha( opacity), Moz Family uses the private attribute -moz-opacity, and the standard attribute is opacity (CSS 3, Moz Family partially supports CSS3). The following value is transparency, use percentage or decimal (alpha (opacity)). Use a value greater than 0 and less than 100, which is actually a percentage).

You don’t see Opera from the above code. That's right, Opera doesn't yet support standard opacity, nor does it have its own private properties to support Alpha transparency.

However, we know that Opera supports Alpha transparent PNG images (of course Moz Family also supports it). So we can use a background image to achieve Alpha transparency.

Example: http://realazy.org/lab/alpha/

The key is:

The code is as follows:

background: transparent url(alpha80.png) left top repeat!important;  
background: #ccc;  
filter:alpha(opacity=50);

Since Moz Family supports Alpha transparent PNG, there is no need for us to use its private properties. Of course, you can use standard opacity, but don't use an alpha transparent image and opacity at the same time, otherwise it becomes a mixture of the two. You can download the above example and look at the comments of /*opacity: .5;*/.