CSS教程:关于网页中的透明元素

【 tulaoshi.com - Web开发 】

CSS3草案中定义了{opacity: | inherit;}来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性来实现的，所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的用CSS实现元素透明的方案：

实际上在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下：

关于hasLayout的更多详情可以看Exploring Internet Explorer HasLayout Overview和On having layout

从上面就可以看出IE实现HTML元素的透明如此混乱，为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，比如CSS Opacity实例中的demo1到demo8，虽然IE团队推荐实现透明的方式是：

{  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  opacity: .5;}

而目前简单最好用的实现方式是如CSS Opacity中demo4这样：

{filter:alpha(opacity=30);opacity:.3;}

实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式，并且针对IE设置了来让元素的为，但在IE8的标准模式下并不能触发，所以利用它们设置为的元素的透明度时在IE8的标准模式下是失败的，这个bug在YUI、Prototype、jQuery和Mootools的最新版本中都存在，具体请在IE8标准模式下看demo9到demo11。同样由于在IE8中设置透明度的方式多种多样，所以利用JavaScript获取HTML元素的透明度值需要考虑多种情况，YUI完美解决了这个问题，Prototype比jQuery稍微周全一点，而Mootools直接是bug，具体可以在IE下看demo1到demo8的演示。从这个角度给4个框架来个排名的话，YUI第一、Prototype第二、jQuery第三、Mootools垫底。

我简单的实现了设置和获取Opacity的函数，可以避开上面框架存在的bug，请在IE8标准模式下看demo12：

//设置CSS opacity 属性的函数，解决IE8的问题var setOpacity = function(el,i){  if(window.getComputedStyle){// for non-IEel.style.opacity = i;  }else if(document.documentElement.currentStyle){ // for IEif(!el.currentStyle.hasLayout){  el.style.zoom = 1;}if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效，所以再次设置inline-block  el.style.display = 'inline-block';}el.style.filter = 'alpha(opacity='+ i * 100 +')';  }}//获取CSS opacity 属性值的函数//借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStylevar getOpacity = function(el){  var value;  if(window.getComputedStyle){value = el.style.opacity;if(!value){  value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];}return value;  }else if(document.documentElement.currentStyle){value = 100;try { // will error if no DXImageTransformvalue = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;} catch(e) {try { // make sure its in the documentvalue = el.filters('alpha').opacity;} catch(err) {}}return value / 100;  }}

不得不说，这些事都是IE整出来的