Home > Web Front-end > CSS Tutorial > How to make IE ff Opera support Alpha transparency at the same time_Experience exchange

How to make IE ff Opera support Alpha transparency at the same time_Experience exchange

WBOY
Release: 2016-05-16 12:04:41
Original
1091 people have browsed it

Today we will learn about CSS Alpha transparency together.
Related knowledge about CSS Alpha transparency. First, please look at the following code:

Copy code The code is as follows:

filter:alpha(opacity =50); /* IE */
-moz-opacity:0.5; /* Moz FF */
opacity: 0.5; /* Browsers that support CSS3 (FF 1.5 also supports)*/

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

From the above code you don’t see Opera. 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.

The key is:
Copy code 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 transparency PNG, so we don't need 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;*/.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template