CSS实现HTML元素透明的方法小结
CSS实现HTML元素透明的方法小结
发布时间:2016-12-27 来源:查字典编辑
摘要:首先看看A级浏览器所支持的用CSS实现元素透明的方案:浏览器最低版本方案InternetExplorer4.0filter:alpha(op...

首先看看A级浏览器所支持的用CSS实现元素透明的方案:

浏览器 最低

版本 方案

Internet Explorer Firefox (Gecko) Opera Safari (WebKit)
4.0 filter: alpha(opacity=xx);
5.5 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx);
8.0 filter: "alpha(opacity=xx)";

filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)";

-ms-filter: "alpha(opacity=xx)";

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";

0.9 (1.7) opacity
9.0 opacity
1.2 (125) opacity

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

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

body、img、table、tr、th、td等元素的hasLayout一直为true。 type为text、button、file或select的input的hasLayout一直为true。 设置{position:absolute}的元素的hasLayout为true 设置{float:left|right}的元素的hasLayout为true 设置{display:inline-block}的元素的hasLayout为true 设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一,其hasLayout才能为true: IE8兼容模式和IE8以前的浏览器中,在标准(strict)模式下其display的值是block,如demo3就不行。 元素在怪癖模式(compat mode)下。 设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true,但在IE8的标准模式下则不会触发hasLayout。 设置了{writing-mode:tb-rl}的元素的hasLayout为true。 元素的contentEditable的属性值为true。 在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true,如demo8。

关于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设置了{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:

//设置CSS opacity 属性的函数,解决IE8的问题

var setOpacity = function(el,i){

if(window.getComputedStyle){// for non-IE

el.style.opacity = i;

}else if(document.documentElement.currentStyle){ // for IE

if(!el.currentStyle.hasLayout){

el.style.zoom = 1;

}

if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效,所以再次设置inline-block

el.style.display = 'inline-block';

}

try{

//测试是否已有filter

//http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx

if(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 +')';

}

}

}

//获取CSS opacity 属性值的函数

//借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle

var 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 DXImageTransform

value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;

} catch(e) {

try { // make sure its in the document

value = el.filters('alpha').opacity;

} catch(err) {

}

}

return value / 100;

}

}

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类