"Summary" CSS transparency summary

In recent years, CSS opacity is a fairly popular technology, but in cross-browser support, for developers, it can be said to be a headache. There is currently no common method to ensure that the transparency settings are available on all browsers currently in use.

This rollup is primarily provided with 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 it has been used for many years, but it has not always been a standard attribute. 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 for the previous versions of Firefox and Safari:

<!--Code highlighting produced by Actipro Codehighlighter (freeware) http://www. Codehighlighter.com/--> #myElement {      -khtml-opacity:. 5;      -moz-opacity:0.5;  }  

The-khtml-opacity setting is for older versions of the WebKit rendering engine, which is now obsolete unless you have a user who needs to be compatible with Safari 1.x.

The second exercise uses the dedicated attribute-moz-opacity 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 up-to-date opacity setting of the CSS syntax except for all current browsers outside IE:

<!--Code highlighting produced by Actipro Codehighlighter (freeware) http://www. Codehighlighter.com/--> #myElement {      opacity:. 7;  }  

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

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

3. CSS transparency under IE

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

<!--Code highlighting produced by Actipro Codehighlighter (freeware) http://www. Codehighlighter.com/--> #myElement {      filter:alpha (opacity=40);  }  

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

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

#myElement {filter:progid:DXImageTransform.Microsoft.Alpha (opacity=40);/* The first line is valid under IE6, IE7 and IE8 */-ms-filter: "ProgID :D XImageTransform.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 for IE8 only.

Note the differences between the two lines of code: in the second line of code, the-ms-prefix is followed by the Filter property, and the attribute values are quoted, which are required by the syntax.

To be honest, with the syntax of Alpha (OPACITY=40) in any version of IE, as in the previous example, I am not sure if there is any need for a "ProgID" method.

4. Use JavaScript to set and change CSS transparency

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

<!--Code highlighting produced by Actipro Codehighlighter (freeware) http://www.  codehighlighter.com/-->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 transparency. Of course, you must first decide which line of code to use by feature detection.

5. Use jquery to set and change CSS transparency

Using jquery 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" under IE:

<!--Code highlighting produced by Actipro Codehighlighter (freeware) http://www. codehighlighter.com/-->$ ("#myElement"). CSS ({opacity:. 4}); Valid for all browsers

You can also use the jquery code to animate an element with transparency:

<!--Code highlighting produced by Actipro Codehighlighter (freeware) http://www. codehighlighter.com/-->$ ("#myElement"). Animate ({      opacity:. 4      }, +, function () {      //animation complete, all browsers valid  });  

Regardless of how much transparency the element is at the beginning of the animation, it will fade to a transparency of ". 4". The speed of the animation is set by the value "1000", and the animation time is measured in milliseconds. The last attribute in the code is an optional callback function that will be executed after the animation is completed.

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 starts and the final transparency is different.

6. Transparency through RGBA

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

<!--Code highlighting produced by Actipro Codehighlighter (freeware) http://www. Codehighlighter.com/--> #rgba {      Background:rgba (98, 135, 167,. 4);  

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

7. Transparency through the Hsla

Similar to the previous definition, CSS3 also allows the use of 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:

<!--Code highlighting produced by Actipro Codehighlighter (freeware) http://www. Codehighlighter.com/--> #hsla {      Background:hsla (207, 38%, 47%,. 4);  }  

For more explanations of hsla colors, refer to this article from w3.org. As with RGBA transparency, the final number represents the transparency setting, which works the same way as RGBA. Note An important benefit of RGBA and hsla transparency is that these transparency settings do not affect child elements, but are passed through the Opacity property. The RGBA and Hsla of alpha settings only affect the transparency of the background color, that's all.

I wish I could involve the main cross-browser CSS transparency code. If the content has errors and omissions, please feel free to comment that I will be happy to make corrections or additions. Thank you ~

"Summary" CSS transparency summary