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

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

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？注册

x

本帖最后由 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>

复制代码

		自动登录	找回密码
密码			注册