CSS filter compatible with IE, Firefox and Google_html/css_WEB-ITnose

This summary mainly provides some detailed introduction, code examples and explanations of CSS opacity to implement this useful CSS technology in your project to be compatible with all browsers.

One thing to note about CSS transparency is that although it has been used for many years, it has never been a standard property. It is a non-standard technology and should be part of the CSS3 specification.

1. Old Opacity settings

The following code is the transparency setting required by old versions of Firefox and Safari:

#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }

The -khtml-opacity setting is for older versions of the Webkit rendering engine. This dedicated property is now available It's obsolete unless you still have users who need compatibility with Safari 1.x.

The second line uses the dedicated attribute -moz-opacity for compatibility with earlier versions of the Mozilla rendering engine, and going back to Netscape Navigator. Firefox 0.9 does not require the use of the -moz-opacity attribute, and Firefox 3.5 (now using the Gecko engine) no longer supports this attribute.

2. CSS transparency under Firefox, Safari, Chrome and Opera

The following code is for all current browsers except IE The simplest and newest CSS syntax for setting opacity:

#myElement { opacity: .7; }

The above syntax will set an element to 70% opacity (or 30% transparent). Setting opacity:1 will make the element opaque, while setting opacity:0 will make the element completely invisible. It's easy to remember as long as "opacity" is equivalent to "opacity". The smaller the opacity value, the closer it is to transparency.

The opacity attribute can be precise to two decimal places, so the values ​​".01" and ".02" are actually different, although the visibility is difficult to detect. Under normal circumstances, it is enough to be accurate to one digit, with a value such as ".3" or ".7".

3. CSS transparency under IE

IE is still different from other browsers, and there are currently three different versions of IE In widespread use, transparency settings are different and sometimes require additional CSS to control:

#myElement { filter: alpha(opacity=40); }

above The CSS uses a dedicated filter property to set IE6-8 transparency. Note for IE6 and IE7: In order for the transparency setting to take effect, the element must be "layout". An element can be laid out using some CSS properties, such as width and position. For details on Microsoft's proprietary hasLayout property, and how to trigger it, refer here.

Another method of setting CSS transparency in IE8 has the following syntax (note the version indicated in the comments):

#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* The first line is valid under IE6, IE7 and IE8*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40 )"; /*The second line is only valid under IE8*/}

The first line of code is for all current IE versions, and the second line is only for IE8.

Note the difference between the two lines of code: in the second line of code, the filter attribute is preceded by the -ms- prefix, and the attribute value is quoted. These are all required by the syntax. Must.

To be honest, after using the alpha(opacity=40) syntax in the previous example to act on any layout element under any version of IE, I don’t think so. Determine whether the "progid" method is still necessary.

4. Use JavaScript to set and change CSS transparency

You can use the following syntax to access the CSS opacity property in JavaScript:

document.getElementById("myElement").style.opacity = ".4"; // For all modern browsers document.getElementById("myElement").style.filter = "alpha( opacity=40)";// For IE

The above code can use inline loops or other dynamic functions to incrementally modify the transparency value. Of course, you have to decide which line of code to use through feature detection first.

5. Use JQuery to set and change CSS transparency

Directly using jQuery to set CSS transparency is more intuitive and easier to implement, because it works in all browsers The code is the same, and you don't have to worry about whether the element "haslayout" in IE:

$("#myElement").css({ opacity: .4 }); // all Browser valid

You can also use the following jQuery code to animate an element transparent:

$("#myElement").animate({ opacity: .4 }, 1000, function() { // Animation completed, valid in all browsers });

No matter what the transparency of the element is at the beginning of the animation, it will gradually fade to a transparency of ".4". The speed of the animation is set with the value "1000" and the animation time is in milliseconds. The last property in the code is an optional callback function that will be executed after the animation is complete.

If the transparency of the element has been set to ".4" in CSS, you will not notice any difference when the animation is running, so the animation starts and ends. Transparency needs to be different.

6. Transparency via RGBA

Another CSS3 technology only supports some new browsers (Firefox 3, Opera 10.1, Chrome 2 ,Safari 3.1), can be set through the alpha channel of RGBA. The syntax is as follows:

#rgba { background: rgba(98, 135, 167, .4); }

In the above definition, through RGB (the first three numbers) to set the color for the background, and then the last one is the alpha setting to enforce transparency for the given color. This alpha setting is the same as the opacity property, which can be set to any number from 0 to 1, accurate to two decimal points. The higher the numeric value, the closer the color is to being fully opaque.

7. Transparency through HSLA

Similar to the previous definition, CSS3 also allows the color and alpha value to be set separately using HSLA, which stands for Hue (Hue), Saturation (Saturation), Lightness (Brightness), and Alpha. Here is an example of HSLA transparency:

#hsla { background: hsla(207, 38%, 47%, .4); }

More about HSLA colors For an explanation, refer to this article from W3.org. Like RGBA transparency, the last number indicates the transparency setting and plays the same role as RGBA. Note that an important benefit of RGBA and HSLA transparency is that these transparency settings do not affect child elements, but they do via the opacity attribute. The RGBA and HSLA alpha settings only affect the transparency of the background color, nothing more.