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

本是古典何须时尚 2022-06-17 04:28 146阅读 0赞

## 转自：http://dancewithnet.com/2009/09/06/css-opacity/    ##

## [CSS实现HTML元素透明的那些事][CSS_HTML] ##

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

<table> 
 <tbody> 
  <tr> 
   <th>浏览器</th> 
   <th>最低<br> 版本</th> 
   <th>方案</th> 
  </tr> 
  <tr> 
   <th>Internet Explorer</th> 
   <td>4.0</td> 
   <td><code>filter: alpha(opacity=xx);</code></td> 
  </tr> 
  <tr> 
   <td>5.5</td> 
   <td><code>filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx);</code></td> 
  </tr> 
  <tr> 
   <td>8.0</td> 
   <td><code>filter: "alpha(opacity=xx)";<br> filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)";<br> -ms-filter: "alpha(opacity=xx)";<br> -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";</code></td> 
  </tr> 
  <tr> 
   <th>Firefox (Gecko)</th> 
   <td>0.9 (1.7)</td> 
   <td><code>opacity</code></td> 
  </tr> 
  <tr> 
   <th>Opera</th> 
   <td>9.0</td> 
   <td><code>opacity</code></td> 
  </tr> 
  <tr> 
   <th>Safari (WebKit)</th> 
   <td>1.2 (125)</td> 
   <td><code>opacity</code></td> 
  </tr> 
 </tbody> 
</table>

实际上在IE8中，-ms-filter是filter的别名，两者区别是[\-ms-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`为`true`
4.  设置`{float:left|right}`的元素的`hasLayout`为`true`
5.  设置`{display:inline-block}`的元素的`hasLayout`为`true`
6.  设置`{height:xx}`或`{width:xx}`的元素必须具体以下两个条件之一，其`hasLayout`才能为`true`：
    
    1.  IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其`display`的值是`block`，如[demo3][]就不行。
    2.  元素在怪癖模式（compat mode）下。
7.  设置了`{zoom:xx}`的元素在IE8的兼容模式或IE8之前的浏览器中其`hasLayout`为`true`，但在IE8的标准模式下则不会触发`hasLayout`。
8.  设置了`{writing-mode:tb-rl}`的元素的`hasLayout`为`true`。
9.  元素的[`contentEditable`][contentEditable]的属性值为`true`。
10. 在IE8标准模式下设置了`{display:block}`的元素的`hasLayout`一直为`true`，如[demo8][]。

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

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

{
    	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    	  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    	  opacity: .5;
    }
    
    	 {
    	filter:alpha(opacity=30);
    	opacity:.3;
    }
     
     而目前简单最好用的实现方式是如CSS Opacity中demo4这样：
     实际上目前最流行的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整出来的……

[CSS_HTML]: http://dancewithnet.com/2009/09/06/css-opacity/
[CSS3]: http://http://www.w3.org/TR/CSS/#css3
[opacity_length_ _ inherit]: http://www.w3.org/TR/css3-color/#transparency
[filter]: http://msdn.microsoft.com/en-us/library/ms532967%28VS.85%29.aspx
[A]: http://developer.yahoo.com/yui/articles/gbs/
[CSS]: https://developer.mozilla.org/en/CSS/opacity
[-ms-filter]: http://msdn.microsoft.com/en-us/library/ms530752%28VS.85%29.aspx
[hasLayout]: http://msdn.microsoft.com/en-us/library/ms530764%28VS.85%29.aspx
[demo3]: http://dancewithnet.com/lab/2009/css-opacity/#demo3
[contentEditable]: http://msdn.microsoft.com/en-us/library/ms537837%28VS.85%29.aspx
[demo8]: http://dancewithnet.com/lab/2009/css-opacity/#demo8
[Exploring Internet Explorer _HasLayout_ Overview]: http://msdn.microsoft.com/en-us/library/bb250481%28VS.85%29.aspx
[On having layout]: http://www.satzansatz.de/cssd/onhavinglayout.html
[CSS Opacity_demo1_demo8]: http://dancewithnet.com/lab/2009/css-opacity/
[IE]: http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx