您现在的位置: 365建站网 > 365学习 > 浏览器中css实现html元素透明

浏览器中css实现html元素透明

文章来源:365jz.com     点击数:451    更新时间:2009-12-28 23:16   参与评论

  今天看到一位前端技术达人(秦歌 & Kaven)的文章《CSS实现HTML元素透明的那些事》,关于浏览器中透明的实现。摘载如下:

 

  CSS3草案中定义了{opacity: | inherit;}来声明元素的透明度,这已经得到了大多数现代浏览器的支持,而IE则很早通过特定的私有属性filter来实现的,所以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、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;
    }
  }

 

 

  在没有看到秦哥这篇文章前,我的了解是:

  function setOpacity(obj, opacity) {
    opacity = (opacity =100)?99.999:opacity;
    if (obj<0) obj=0; else if (obj>100) obj = 100;

    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
   }

  运行这个函数的效果可想而知.....

 

  在《Pro JavaScript Techniques》中的是:

  //设置透明度   
  function setOpacity(elem,num){
       if(elem.filters){
           elem.style.filter="alpha(opacity="+num+")";
           }else{
               elem.style.opacity=num/100;
               }
       }


 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (451人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------