CSS Alpha transparency knowledge learning

The transparency of images is a special form used in Web pages. Although they are not very common, they are often caught off guard, although there are examples of CSS in webjx.com, we haven't systematically introduced CSS Alpha transparency yet. Let's take a look at the relevant knowledge today.

Knowledge about CSS Alpha transparency. See the following code first:

Filter: alpha (opacity = 50);/* IE */
-Moz-opacity: 0.5;/* Moz + FF */
Opacity: 0.5;/* supports CSS3 browsers (FF 1.5 is also supported )*/

Internet Explorer uses the private attribute filter: alpha (opacity), Moz Family uses the Private Attribute-moz-opacity, and the standard attribute is opacity (CSS 3, the Moz Family part supports CSS3 ). The following value is transparency. The percentage or decimal number (alpha (opacity) is used to use a value greater than 0 and less than 100, which is actually a percentage ).

You have not seen Opera from the code above. Yes, Opera does not yet support standard opacity, nor does it have private attributes that support Alpha transparency.

However, we know that Opera supports Alpha-transparent PNG images (also supported by Moz Family ). Therefore, we can use background images to achieve Alpha transparency.

The key lies in:

Background: transparent url(alpha80.png) left top repeat! Important;
Background: # ccc;
Filter: alpha (opacity = 50 );

Since Moz Family supports Alpha-transparent PNG, we do not need to use its private attributes. Of course, you can use the standard opacity, but do not use the Alpha transparent image and opacity at the same time. In this way, the two are mixed. You can download the example above, and then/* opacity:. 5; */to see the annotations.