Allow IEffOpera to support Alpha-transparent methods at the same time _ experience exchange

Source: Internet
Author: User
Tags transparent image
The transparent effect of images is a special form used in Web pages. Although they are not very common, they are often caught off guard when encountering such a requirement. Today we will learn about CSS Alpha transparency.
Knowledge about CSS Alpha transparency. See the following code first:

The Code is as follows:


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:

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, 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.