life 发表于 2009-8-31 18:31:00

IE6.0下使PNG能够透明显示

本帖最后由 life 于 2009-8-31 18:32 编辑

记得以前在Seekpai做过的一个专题留言板,里面大量的使用了png图像,但是有个IE6无法显示png的透明问题,所以用了一CSS滤镜使得IE6能够显示透明的png图像。

       如果你有小雨的样式表滤镜中文手册不妨查看一下Microsoft.AlphaImageLoader或者百度一下。在这里我就不赘述了。


注意的问题我总结了下(我现在认知到的两点):


1.使用csshack专门针对IE6写一个样式,因为非微软的浏览器是无法识别这个样式的。


2.如果你使用PNG透明的区域如果有链接的话,会造成链接无法点击,使用z-index这样的方法也无法解决。解决方法就是对无法点击的区域加一个 position:relative相对定位。如果父容器有position:absolute绝对定位的时候可以使用float浮动方法使其能够点击。


借用了kid这套中国风图标做个演示。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>让IE支持透明的PNG图片</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#000000;

}
#s{
position:relative;
cursor:move;
width:1280px;
height:800px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='http://img.zcool.com.cn/png3/030/orbino_icon_pack_001.png');
}
*>
#s {
background:url("http://img.zcool.com.cn/png3/030/orbino_icon_pack_001.png")
}
/*FIREFOX*/
-->
</style>
</head>

<body>
<div id="s" ></div>
</body>
</html>
页: [1]
查看完整版本: IE6.0下使PNG能够透明显示