今天小编跟大家讲解下有关CSS实现HTML元素透明的方法小结 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现HTML元素透明的方法小结 的相关资料，希望小伙伴们看了有所帮助。
首先看看A级浏览器所支持的用CSS实现元素透明的方案：
浏览器 最低版本 方案 Internet Explorer 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)"; Firefox (Gecko) 0.9 (1.7) opacity Opera 9.0 opacity Safari (WebKit) 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_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 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整出来的……
来源：爱蒂网
