CSS Tutorial: A detailed introduction to CSS opacity

CSS opacity has been a fairly popular technique in recent years, but it can be a headache for developers to support across browsers. There is currently no common method to ensure that the transparency settings are valid for all browsers currently in use.

This summary is mainly to provide some CSS opaque details, code examples and explanations to implement this useful CSS technology in your project compatible with all browsers.

One thing to note about CSS transparency is that although it has been in use for many years, it has not been a standard attribute for a long time. It is a non-standard technique and should be part of the CSS3 specification.

1. Old opacity Settings

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

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

The-khtml-opacity setting is for an older version of the WebKit rendering engine, which is now obsolete unless you have a user that is compatible with Safari 1.x.

The second exercise with dedicated properties-moz-opacity is designed to be compatible with earlier versions of the Mozilla rendering engine, as well as back to Netscape Navigator. Firefox 0.9 does not require the use of the-moz-opacity property, Firefox 3.5 (now using the Gecko engine) is no longer supporting this property.

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

The following code is the simplest, most recent opacity setting CSS syntax for all current browsers except IE:

#myElement {  
    Opacity:. 7;  
}  

The above syntax sets an element to be 70% opaque (or 30% transparent). Setting opacity:1 makes the element opaque, and setting opacity:0 makes the element completely invisible. Just remember that "opacity" equals "opacity" and it's easy to remember that the smaller the opacity value, the closer it is to transparency.

The Opacity property can be exactly two digits after the decimal point, so the value ". 01" and ". 02" are actually different, although the visibility is difficult to detect. In general, it is OK to be accurate to one, taking values such as ". 3" or ". 7".

3. The CSS transparency under IE

IE is different from other browsers, and there are currently three different versions of IE are widely used, transparency settings are various, and sometimes require additional CSS to control:

#myElement {  
    Filter:alpha (OPACITY=40);  
}  

The above CSS uses the dedicated Filter property to set ie6-8 transparency. for the IE6 and IE7 Note: For the transparency setting to take effect, the element must be "laidout." An element can be laid out by using some CSS properties, like width and position. For details on Microsoft proprietary Haslayout attributes, and how to trigger it, refer here.

Another way to set IE8 CSS transparency is as follows (note the version indicated in the note):

#myElement {  
    Filter:progid:DXImageTransform.Microsoft.Alpha (OPACITY=40);  
   
    -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 row is for IE8 only.

Note the difference between the two lines of code: in the second line of code, the-ms-prefix is followed by the Filter property, and the property value is enclosed in quotes, which are required by the syntax.

To be honest, I'm not sure if it's necessary to use the "ProgID" method, as the previous example uses alpha (OPACITY=40) syntax to effect any layout element under any version of IE.

4. Use JavaScript to set and change CSS transparency

You can access the CSS opacity properties in JavaScript using the following syntax:

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 increment the value of the modified transparency. Of course, you must first determine which line of code to use by feature detection.

5. Use jquery to set and change CSS transparency

Using jquery directly to set CSS transparency is more intuitive and easier to implement because all browser code is the same, and you don't have to worry about whether the element is "haslayout" in IE:

All browsers are valid

You can also use the jquery code to make an element animated transparently:

$ ("#myElement"). Animate ({  
    Opacity:. 4  
    }, 1000, function () {  
    Animation complete, valid under all browsers  
});  

Regardless of the transparency of the element at the beginning of the animation, it will be graded to the opacity of ". 4". The speed of the animation is set by the value "1000", and the animation time is measured in milliseconds. The last property in the code is an optional callback function that will be executed after the animation completes.

If the transparency of the element is already set to ". 4" in the CSS, you will not notice any difference when the animation is running, so the animation begins and the final transparency is different.

6. Transparency through RGBA

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

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

In the definition above, color the background with RGB (first three digits) and then the last Alpha setting to perform the transparency of the given color. This alpha setting, like the Opacity property, can set any number from 0 to 1 to get exactly two decimal points. The larger the numeric value, the closer it is to the completely opaque color.

7. Transparency through Hsla

Similar to previous definitions, CSS3 also allows you to use HSLA to set color and alpha values individually, Hsla for hue (hue), saturation (saturation), lightness (brightness), and alpha. The following are examples of Hsla transparency:

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

For more on Hsla color explanations, refer to this article from w3.org. As with RGBA transparency, the final number represents the transparency setting, which plays the same role as RGBA. One important benefit of RGBA and hsla transparency is that these transparency settings do not affect child elements, but by the way they are opacity properties. Alpha-Set RGBA and Hsla only affect the transparency of the background color, that's all.

I wish I could cover the main cross-browser CSS transparency code. If the content is flawed, please feel free to comment and I will be happy to make corrections or additions. Thank you ~