从CSS透明谈起

 

 

今天受朋友所托做一个主页页面，美工不是我做的，我看了一下PSD文件简直要晕过去：很多透明和发光效果…… 再回想一下以前被IE6折磨的情景……

 

没办法，只要硬着头皮上，通过多重PNG图像的透明来达到效果，不过这里遇到了IE6不能显示PNG透明效果的难题，因为之前听过说可以用滤镜解决，所以上网搜了一下果然有，不过还是有一些限制，挺麻烦的，待会我会详细谈谈。

 

先不急着说怎么处理包含透明元素的PNG图片，这里先从简单的透明效果谈起，毕竟这可能是最常使用的一个效果。

 

CSS透明

 

IE的Alpha滤镜

 

想让元素在ie中显示30%的透明度可以在元素的css属性列表中添加

 

filter:alpha(opacity=30);

 

通过ie的alpha滤镜（alpha滤镜有更加强大的功能，后面会提到）达到透明效果。

 

如果想通过JavaScript改变元素的透明度，有两种方法：

 

obj.filters.alpha.opacity = value;

或者另一种比较直观的方式

obj.style.filter = 'alpha(opacity=' + value + ')';

 

这里要注意两种方法中filter的单复数形式。其中第一种方法中filters对象是ie特有的对象，因此我们可以通过判断filter对象是否存在来判定客户端是否使用ie浏览器。

 

Firefox和Opera的opacity属性

 

Firefox和Opera中没有滤镜（不知道我这样理解是否正确），要令Firefox和Opera中的元素透明，可以使用一个ie没有的css属性：opacity。简单地，我们可以在css列表中加入

 

opacity = 0.3;

 

注意，这里opacity的最大值（即不透明）为1，而不是类似ie的alpha属性中opacity参数一样以100表示不透明。

 

想通过JavaScript改变透明度只需要使用通常改变css属性的方法就行了。

 

CrossBrowers

 

最后我们根据上述区别，写一个通用的（跨浏览器的）设置元素透明属性的函数

 

function setOpacity(elem, level) {
    if (elem.filters) 
        elem.style.filter = 'alpha(opacity=' + level + ')';
    else
        elem.style.opacity = level / 100;
}

 

alpha更进一步

 

虽然仅仅只有ie支持滤镜，但是这里还是想进一步说说。毕竟这和ie的其他非兼容性不同，滤镜是ie的一个比较优秀的扩展，是标准之外的东西，而不是违反标准，我们甚至希望它能够上升为标准，这样我们就可以通过滤镜简单处理图片做出更加漂亮的效果了。

 

看看下面这个效果：

 

 

这里是以上效果所使用的代码：

<script type="text/javascript">
function setAlpha() {
    var temp = document.getElementById('test');
    val = parseInt(temp.filters.alpha.style);
    if(++val>3) val = 0;
    temp.filters.alpha.style = val;
}
</script>
<style type="text/css">
#test { 
width:300px; height:100px; border:1px solid #000; background-color:#0000FF; 
filter:alpha(opacity=100, finishopacity=0, style = 0); }
</style>
<div id="test"></div>
<input type="button" value="点击查看三种效果" onclick="setAlpha()" />

 

除了效果里使用到的 opacity / finishopacity / style 参数之外，还有 enable / startx / starty / finishx / finshy ，enable可以设置或检索滤镜是否激活，其他四个和透明效果的起始位置有关，这里就不赘述了。

 

实现透明的另一种方式：PNG

 

吃了个宵夜回来，发现已经有人评论了呵呵，并且是久违了的Cat Chen师兄哈哈～多谢指点！ 继续努力把剩下的写完～～

 

PNG图片算是较为普遍的解决透明问题的一种方式了，并且你可以任意制作自己喜欢的渐变方式，而不像alpha滤镜那样只能在ie上呈现。本来我们可以自由地使用png图片，IE7、Firefox和Opera都有很好的支持，然而IE6至今还没有“退出江湖”，我们不得不将其列入考虑范围之内。所以对于PNG图片的透明问题，实际上是解决PNG图片在IE6上的显示问题。

 

这个问题通过界面滤镜AlphaImageLoader解决。

 

PNG透明图片作为背景

 

先看看效果（注意，以下测试仅适用于ie6）

 

 

这是演示效果的代码（不好意思，借用sccnn上一个png图片～）

 

 

<style type="text/css">
#test2 {
width:250px; height:150px;
background-color:#000;
background-image:url(http://online.sccnn.com/icon/980/Euro_2008_002.png); 
background-repeat:no-repeat;
_background-image:none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://online.sccnn.com/icon/980/Euro_2008_002.png", sizingMethod=crop);
}
</style>

<script>
var vals = new Array('image', 'crop', 'scale');
var n = 0;
var str = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://online.sccnn.com/icon/980/Euro_2008_002.png",sizingMethod=';

function setAlphaImageLoader() {
    var temp = document.getElementById('test2');
    if(++n > 2) n = 0;
    temp.style.filter = str + vals[n] + ')';
}
</script>

<div id="test2"></div>
<input type="button" value="点击查看三种效果" onclick="setAlphaImageLoader()" />

 

你可以通过这种方法兼容ie6的png透明问题。

 

这里有个小技巧要解释一下，css属性前加“_”下划线仅有ie6能识别，因此刚好在这个地方得到应用。因此也要注意把两个加下划线的属性置于最后，如果是ie6就会将原背景图属性设为none覆盖之前的图片，并且启用alphaimageloader滤镜。另外滤镜中的src参数，需要注意的是，你可以在这里使用相对地址，但是这个地址必须是页面所在位置的相对地址，而不是样式表的相对地址。

 

img标签中的png

 

这个可以使用前面修改css的方法，网上可以搜到一段据闻是“官方解决方案”的代码，也是使用前述滤镜。下面是代码：

 

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      for(var j=0; j<document.images.length; j++)
      {
         var img = document.images[j]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
            img.outerHTML = strNewHTML
            j = j-1
         }
      }
   }    
}

 

只要在页面加载完毕之后运行这行代码就行了，测试过没问题。不过如果页面动态更换了png图片，可能要重新执行这个函数。