[Summary] 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 details about CSS opacity,CodeExamples 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:

  # Myelement{
-Khtml-Opacity:. 5;
-Moz-Opacity:0.5;
}
 

-Khtml-OpacityThe settings are for earlier versions of the WebKit rendering engine. This type of special attribute is outdated now, unless you still need to be compatible with Safari 1.x.

Second, use special attributes-Moz-OpacityIt is designed to be compatible with earlier versions of the Mozilla rendering engine and tracing to Netscape Navigator. Not required after FireFox 0.9-Moz-OpacityProperty. Firefox 3.5 (currently using the gecko engine) does not support this property.

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:

 
  # Myelement{
Opacity:. 7;
}
 

The preceding syntax sets an element to 70% opaque (or 30% transparent ). SetOpacity: 1Will make the element opaque, and setOpacity: 0The elements are completely invisible. You

Just remember"OpacityIt is easy to remember that the smaller the opacity value, the closer it is to transparency.

OpacityThe attribute can be accurate to the second decimal point, 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.ForIE6AndIE7Note: To make the transparent settings take effect, the element must be "laid out".An element can be laid out by using CSS attributes, suchWidthAndPosition. About Microsoft proprietaryHaslayoutFor details about attributes and how to trigger them, 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 row is valid only in 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 codeFilterAttribute followed-MS-Prefix, 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:

  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 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 whether the element in IE is"Haslayout":

  $ ("# Myelement"Pai.css ({opacity :.4});
//Valid for all browsers
 

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

  $ ("# Myelement"). Animate ({
Opacity :.4
},1000,Function(){
//Animation completed, effective 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:

 
  # 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 followsOpacityThe attribute is the same. You can set any number ranging from 0 to 1 to get two decimal places. 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.Hue(Color ),Saturation(Saturation ),Lightness(Brightness), andAlpha. The following is an example of HSLA transparency:

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

For more HSLA color explanations, refer to this article from w3.org. Like rgba transparency, the last number indicates the transparency setting, which plays the same role as rgba. Note that an important benefit of rgba and HSLA transparency is that these transparency settings do not affect sub-elements,OpacityAttribute method. The rgba and HSLA set by Alpha only affect the transparency of the background color.

I hope I can focus on cross-browser CSS Transparency Code. If any content is incorrect, please feel free to comment out and I will be happy to make corrections or supplements. Thank you ~

Address: http://www.cnblogs.com/wiky/archive/2010/03/31/CSS-Opacity-Comprehensive-collect.html

PS: This article is summarized by Vic. If you have any reposted information, please indicate the source. Thank you!