打印

IE6下使png图像能够显示透明遮罩

hkysj

图标进阶

Rank: 2

帖子: 35
原创值: 1
发烧度: 35
贡献值: 34
=饭团=: 16

1^# 大中小发表于 2008-4-23 10:09 只看该作者

IE6下使png图像能够显示透明遮罩

最近在自己的博客里面写一些平常在web方面碰到的问题，并写下解决方法。有什么写的不对的地方，还希望大家互相讨论，共同进步。原文地址：http://www.hkysj.com/blog/?p=200
我在demo演示里面借用了kid的一个中国风图标。KID真棒！^_^

记得以前在Seekpai做过的一个专题留言板，里面大量的使用了png图像，但是有个IE6无法显示png的透明问题，所以用了一CSS滤镜使得IE6能够显示透明的png图像。
http://ch.seekpai.com/fashion/msg.skp

如果你有小雨的样式表滤镜中文手册不妨查看一下Microsoft.AlphaImageLoader或者百度一下。在这里我就不赘述了。
注意的问题我总结了下（我现在认知到的两点）：
1.使用csshack专门针对IE6写一个样式，因为非微软的浏览器是无法识别这个样式的。
2.如果你使用PNG透明的区域如果有链接的话，会造成链接无法点击，使用z-index这样的方法也无法解决。解决方法就是对无法点击的区域加一个 position:relative相对定位。如果父容器有position:absolute绝对定位的时候可以使用float浮动方法使其能够点击。
借用了kid这套中国风图标做个演示。
演示：http://www.hkysj.com/preview/04/

下面是代码：

<!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=utf-8"
/>
<meta
name="generator"
content="www.hkysj.com"
/>
<meta
name="author"
content="hkysj"
/>
<title>IE6下用CSS使PNG图像透明</title>
<style
type="text/css">
<!--
body {
margin:0; background:#000;
}
h2{ font-size:16px; color:#FFF;}
ul { display:block; margin:50px auto 0; width:608px; height:200px;}
li { display:block; width:128px; height:128px; float:left;}
li.one{ background:url(1.png) no-repeat center}
li.two{ background:url(2.png) no-repeat center}
li.three{ background:url(3.png) no-repeat center}
li.four{ background:url(4.png) no-repeat center}
/* *html For IE6 PNG */
ul.png li.one{ background:url(1.png) no-repeat center}
*html ul.png li.one{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="1.png"); background:none; width:104px; height:104px;}
ul.png li.two{ background:url(2.png) no-repeat center}
*html ul.png li.two{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="2.png"); background:none; width:128px; height:128px;}
ul.png li.three{ background:url(3.png) no-repeat center}
*html ul.png li.three{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="3.png"); background:none; width:128px; height:128px;}
ul.png li.four{ background:url(4.png) no-repeat center}
*html ul.png li.four{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="4.png"); background:none; width:128px; height:128px;}
-->
</style>
</head>
<body>
<ul>
<h2>如果你使用的是IE6.0，那么你看到的PNG图像将是不透明的(未使用CSS滤镜)</h2>
<li
class="one"></li>
<li
class="two"></li>
<li
class="three"></li>
<li
class="four"></li><a
href=""
target="_blank"
</ul>
<ul
class="png">
<h2>如果你使用的是IE6.0，那么你看到的PNG图像将是透明的(已使用CSS滤镜)</h2>
<li
class="one"></li>
<li
class="two"></li>
<li
class="three"></li>
<li
class="four"></li>
</ul>
</body>
</html>