转至论坛你的位置：江西广告网 >> 视觉 >> Web软件 >> 查看帖子

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

发布日期发布: 2009-8-31 | 发布人发布者: life | 来源: 江西广告网

[i=s] 本帖最后由 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这套中国风图标做个演示。

CODE:

<!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>

分享到 :

本站文章部分内容来自互联网，供读者交流和学习，如有涉及作者版权问题请及时与我们联系，以便更正或删除。感谢所有提供信息的网站，并欢迎各类媒体与我们进行信息共享合作。

关闭本窗口 | 打印 | 收藏此页 | 推荐给好友 | 举报

我也来说两句查看全部回复