[Summary] CSS transparency summary and css transparency Summary

[Summary] CSS transparency summary and css transparency Summary

CSS opacity has been a very popular technology in recent years, but cross-browser support is a headache for developers. Currently, no common method is available to ensure that transparency settings are valid on all browsers currently in use.

This summary mainly provides some details about CSS opacity, sample code, and explanations to implement this useful CSS technology to be compatible with all browsers in your project.

One thing to note about CSS transparency is that although it has been used for many years, it has never 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 sets the transparency required for earlier 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 intended for the earlier version of the Webkit rendering engine. This type of special attribute is outdated, unless you still need to be compatible with Safari 1.x.

The second line uses the dedicated Property-moz-opacity to be compatible with earlier versions of the Mozilla rendering engine and trace back to Netscape Navigator. The-moz-opacity attribute is not required for Firefox 0.9 and later versions. Firefox 3.5 (currently using the Gecko engine) does not support this attribute.

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

The following code is the simplest and most up-to-date CSS syntax for all browsers except IE:

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

The preceding syntax 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. You only need to remember that "opacity" is equivalent to "opacity" and it is easy to remember that the smaller the opacity value, the closer it is to transparency.

The opacity attribute can be precise to the last two decimal places, so the values ". 01" and ". 02" are actually different, although the visibility is hard to find. Generally, it can be accurate to one digit. The value can be ". 3" or ". 7 ".

3CSS transparency in. IE

IE is still different from other browsers. At present, there are three different versions of IE which are widely used. transparency settings are different, and sometimes additional CSS is required for control:

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

The CSS above uses a dedicated filter property to set the transparency of the IE6-8.For IE6 and IE7, note that to make the transparent settings take effect, the element must be "laid out". An element can be laid out by using CSS attributes, such as width and position. For details about Microsoft's proprietary hasLayout attribute and how to trigger it, refer to here.

The syntax for setting the CSS transparency of IE8 is as follows (note the version mentioned in the comment ):

# MyElement {filter: progid: DXImageTransform. microsoft. alpha (opacity = 40);/* The first line is valid in 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 for IE8 only.

Note the differences between the two lines of code: In the second line of code, the filter attribute is prefixed with-ms-and the attribute value is enclosed by quotation marks. These are all required by the syntax.

To be honest, with the help of the alpha (opacity = 40) syntax used in the previous example to act on any layout element in IE of any version, i'm not sure whether the "progid" method is necessary.

4. Use JavaScript to set and change CSS transparency

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

<! -- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/--> document. getElementById ("myElement "). style. opacity = ". 4 "; // document for all modern browsers. getElementById ("myElement "). style. filter = "alpha (opacity = 40)"; // for IE

The above code can use an in-row loop or other dynamic functions to incrementally modify the transparency value. Of course, you must first use feature detection to determine which line of code to use.

5. Use JQuery to set and change CSS transparency

Setting CSS transparency directly with jQuery is more intuitive and easier to implement, because the code in all browsers is the same, and you don't have to worry about "haslayout" in IE ":

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

You can also use jQuery code to make an element animation transparent:

<! -- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/--> $ ("# myElement "). animate ({opacity :. 4}, 1000, function () {// animation completed, valid in all browsers });

No matter how much transparency the element is at the beginning of the animation, it will gradient to ". 4 ". The animation speed is set by the value "1000". 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 completed.

If the transparency of this element has been set to ". 4 ", you will not find any difference when the animation is running, so the animation starts and the final transparency will be different.

6. Transparency through RGBA

Another CSS3 technology only supports some new browsers (Firefox 3 +, Opera 10.1 +, Chrome 2 +, Safari 3.1 +), which can be set through the alpha channel of RGBA. Syntax:

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

In the above definition, set the color of the background through RGB (the first three digits), and then the last one is alpha settings to implement the transparency of the given color. This alpha setting is the same as the opacity attribute. You can set any number ranging from 0 to 1 to get two decimal points. The larger the number value, the closer it is to a completely opaque color.

7. Transparency through HSLA

Similar to the previous definition, CSS3 allows you to use HSLA to set color and alpha values separately. HSLA indicates Hue, Saturation, Lightness, and Alpha. The following is an example of HSLA transparency:

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