[Summary] Summary of CSS transparency_html/css_WEB-ITnose

In recent years, CSS opacity has been a very popular technology, but in terms of cross-browser support, it can be said to be a headache for developers. There is currently no universal way to ensure that transparency settings work across all browsers currently in use.

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:

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

　 -khtml- The opacity setting is for older versions of the Webkit rendering engine, and this proprietary property is now 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 the simplest and most up-to-date CSS syntax for opacity settings in all current browsers except IE :

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

The above syntax will set an element to 70% opaque (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. The transparency settings are different, and sometimes it is necessary Additional CSS to control:

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

The above 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)"; /*No. The second line of code 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, which is required by the syntax.

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 am not sure whether it is still necessary. "progid" method.

4. Use JavaScript to set and change CSS transparency

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

a20a1a3df7de8db25c9920684acc67c2document.getElementById("myElement").style.opacity = ".4";

// For all Modern browser document.getElementById("myElement").style.filter =

"alpha(opacity=40)"; // For IE

The above code can be used inline A loop or other dynamic function incrementally modifies 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

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

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->$("#myElement").css({ opacity: .4 }); // 所有浏览器有效

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

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->$("#myElement").animate({      opacity: .4      }, 1000, function() {      // 动画完成，所有浏览器下有效  });  

　　不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数，将在动画完成后执行。

　　如果该元素的透明度在CSS中已经设定为“.4”，那在动画运行的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。

6. 通过 RGBA的透明度

　　另一个CSS3技术只支持部分新的浏览器（Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+），可通过RGBA的alpha通道的方式设定。语法如下：

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

　　在上面的定义中，通过RGB（前三个数字）给背景设定颜色，然后最后一个是alpha设置，以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样，可设定任何0到1的数字，精确得到两位小数点。数字值越大，就越接近完全不透明的颜色。

7. 通过 HSLA的透明度

　　类似之前的定义，CSS3还允许使用HSLA单独设置颜色和alpha值，HSLA表示Hue（色调）, Saturation（饱和度）, Lightness（亮度）, 和Alpha。以下是HSLA透明的例子：

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

　　更多关于HSLA颜色的解释，参考这篇来自W3.org的文章。如同RGBA透明度，最后的数字表示透明度设置，跟RGBA起同样的作用。注意RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的，但通过opacity属性的方式则会。alpha设置的RGBA和HSLA只影响背景颜色的透明度，仅此而已。

　　我希望我能涉及主要的跨浏览器的CSS透明度代码。如果内容有错漏，欢迎随时评论指出，我将乐意作更正或补充。谢谢~