从CSS透明谈起
今天受朋友所托做一个主页页面,美工不是我做的,我看了一下PSD文件简直要晕过去:很多透明和发光效果…… 再回想一下以前被IE6折磨的情景……
没办法,只要硬着头皮上,通过多重PNG图像的透明来达到效果,不过这里遇到了IE6不能显示PNG透明效果的难题,因为之前听过说可以用滤镜解决,所以上网搜了一下果然有,不过还是有一些限制,挺麻烦的,待会我会详细谈谈。
先不急着说怎么处理包含透明元素的PNG图片,这里先从简单的透明效果谈起,毕竟这可能是最常使用的一个效果。
CSS透明
IE的Alpha滤镜
想让元素在ie中显示30%的透明度可以在元素的css属性列表中添加
通过ie的alpha滤镜(alpha滤镜有更加强大的功能,后面会提到)达到透明效果
如果想通过JavaScript改变元素的透明度,有两种方法:
或者另一种比较直观的方式
这里要注意两种方法中filter的单复数形式。其中第一种方法中filters对象是ie特有的对象,因此我们可以通过判断filter对象是否存在来判定客户端是否使用ie浏览器。
Firefox和Opera的opacity属性
Firefox和Opera中没有滤镜(不知道我这样理解是否正确),要令Firefox和Opera中的元素透明,可以使用一个ie没有的css属性:opacity。简单地,我们可以在css列表中加入
注意,这里opacity的最大值(即不透明)为1,而不是类似ie的alpha属性中opacity参数一样以100表示不透明。
想通过JavaScript改变透明度只需要使用通常改变css属性的方法就行了。
CrossBrowers
最后我们根据上述区别,写一个通用的(跨浏览器的)设置元素透明属性的函数
if (elem.filters)
elem.style.filter = 'alpha(opacity=' + level + ')';
else
elem.style.opacity = level / 100;
}
alpha更进一步
虽然仅仅只有ie支持滤镜,但是这里还是想进一步说说。毕竟这和ie的其他非兼容性不同,滤镜是ie的一个比较优秀的扩展,是标准之外的东西,而不是违反标准,我们甚至希望它能够上升为标准,这样我们就可以通过滤镜简单处理图片做出更加漂亮的效果了。
看看下面这个效果:
这里是以上效果所使用的代码:
![](/Images/OutliningIndicators/ContractedBlock.gif)
除了效果里使用到的 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图片~)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<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的方法,网上可以搜到一段据闻是“官方解决方案”的代码,也是使用前述滤镜。下面是代码:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
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图片,可能要重新执行这个函数。
转自 http://www.cnblogs.com/zhengchuyu/archive/2008/07/30/1256890.html