CSS实现HTML元素透明的那些事

CSS实现HTML元素透明的那些事CSS3草案中定义了{opacity:length|inherit;}来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性filter来实现的，所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的用CSS实现元素透明的方案：浏览器最低版本方案InternetExplorer4.0filter:alpha(opacity=xx);5.5filter:progid:DXImageTransform.Microsoft.Alpha(opacity=xx);8.0filter:alpha(opacity=xx);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=xx);-ms-filter:alpha(opacity=xx);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);Firefox(Gecko)0.9(1.7)opacityOpera9.0opacitySafari(WebKit)1.2(125)opacity实际上在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下：1.body、img、table、tr、th、td等元素的hasLayout一直为true。2.type为text、button、file或select的input的hasLayout一直为true。3.设置{position:absolute}的元素的hasLayout为true4.设置{float:left|right}的元素的hasLayout为true5.设置{display:inline-block}的元素的hasLayout为true6.设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true：1.IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。2.元素在怪癖模式（compatmode）下。7.设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。8.设置了{writing-mode:tb-rl}的元素的hasLayout为true。9.元素的contentEditable的属性值为true。10.在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true，如demo8。关于hasLayout的更多详情可以看ExploringInternetExplorer“HasLayout”Overview和Onhavinglayout从上面就可以看出IE实现HTML元素的透明如此混乱，为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，比如CSSOpacity实例中的demo1到demo8，虽然IE团队推荐实现透明的方式是：{-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:.5;}而目前简单最好用的实现方式是如CSSOpacity中demo4这样：{filter:alpha(opacity=30);opacity:.3;}实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式，并且针对IE设置了{zoom:1}来让元素的hasLayout为true，但在IE8的标准模式下zoom并不能触发hasLayout，所以利用它们设置hasLayout为false的元素的透明度时在IE8的标准模式下是失败的，这个bug在YUI（我已经给YUI团队提交了这个bug，他们会在下个版本修复，最新的2.8.0中依旧存在，期待2.9.0吧）、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：//设置CSSopacity属性的函数，解决IE8的问题varsetOpacity=function(el,i){if(window.getComputedStyle){//fornon-IEel.style.opacity=i;}elseif(document.documentElement.currentStyle){//forIEif(!el.currentStyle.hasLayout){el.style.zoom=1;}if(!el.currentStyle.hasLayout){//在IE8中zoom不生效，所以再次设置inline-blockel.style.display='inline-block';}try{//测试是否已有filter//(el.filters){if(el.filters('alpha')){el.filters('alpha').opacity=i*100;}else{el.style.filter+='alpha(opacity='+i*100+')';}}}catch(e){el.style.filter='alpha(opacity='+i*100+')';}}}//获取CSSopacity属性值的函数//借鉴自=function(el){varvalue;if(window.getComputedStyle){value=el.style.opacity;if(!value){value=el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];}returnvalue;}elseif(document.documentElement.currentStyle){value=100;try{//willerrorifnoDXImageTransformvalue=el.filters['DXImageTransform.Microsoft.Alpha'].opacity;}catch(e){try{//makesureitsinthedocumentvalue=el.filters('alpha').opacity;}catch(err){}}returnvalue/100;}}不得不说，这些事都是IE整出来的……