查看完整版本: IE6下使png图像能够显示透明遮罩

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

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

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

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

下面是代码：


[list=1][font=Courier New][color=olive]<[/color][color=gray]![/color][color=#00008b]DOCTYPE[/color]
[color=#00008b]html[/color]
[color=#00008b]PUBLIC[/color]
[color=#8b0000]"[/color][color=red]-//W3C//DTD XHTML 1.0 Transitional//EN[/color][color=#8b0000]"[/color]
[color=#8b0000]"[/color][color=red]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/color][color=#8b0000]"[/color][color=olive]>[/color][/font] [*][font=Courier New][color=olive]<[/color][color=green]html[/color]
[color=#00008b]xmlns[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]http://www.w3.org/1999/xhtml[/color][color=#8b0000]"[/color][color=olive]>[/color][/font][*][font=Courier New][color=olive]<[/color][color=green]head[/color][color=olive]>[/color][/font][*][font=Courier New][color=olive]<[/color][color=green]meta[/color]
[color=#00008b]http-equiv[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]Content-Type[/color][color=#8b0000]"[/color]
[color=#00008b]content[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]text/html; charset=utf-8[/color][color=#8b0000]"[/color]
[color=olive]/>[/color][/font][*][font=Courier New][color=olive]<[/color][color=green]meta[/color]
[color=#00008b]name[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]generator[/color][color=#8b0000]"[/color]
[color=#00008b]content[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]www.hkysj.com[/color][color=#8b0000]"[/color]
[color=olive]/>[/color][/font][*][font=Courier New][color=olive]<[/color][color=green]meta[/color]
[color=#00008b]name[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]author[/color][color=#8b0000]"[/color]
[color=#00008b]content[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]hkysj[/color][color=#8b0000]"[/color]
[color=olive]/>[/color][/font][*][font=Courier New][color=olive]<[/color][color=green]title[/color][color=olive]>[/color][color=gray]IE6下用CSS使PNG图像透明[/color][color=olive]</[/color][color=green]title[/color][color=olive]>[/color][/font][*][font=Courier New][color=olive]<[/color][color=green]style[/color]
[color=#00008b]type[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]text/css[/color][color=#8b0000]"[/color][color=olive]>[/color][/font][*][color=#ffa500][font=Courier New]<!--[/font][/color][*][color=#ffa500][font=Courier New]body {[/font][/color][*][color=#ffa500][font=Courier New]margin:0; background:#000;[/font][/color][*][color=#ffa500][font=Courier New]}[/font][/color][*][color=#ffa500][font=Courier New]h2{ font-size:16px; color:#FFF;}[/font][/color][*][color=#ffa500][font=Courier New]ul { display:block; margin:50px auto 0; width:608px; height:200px;}[/font][/color][*][color=#ffa500][font=Courier New]li { display:block; width:128px; height:128px; float:left;}[/font][/color][*][color=#ffa500][font=Courier New]li.one{ background:url(1.png) no-repeat center}[/font][/color][*][color=#ffa500][font=Courier New]li.two{ background:url(2.png) no-repeat center}[/font][/color][*][color=#ffa500][font=Courier New]li.three{ background:url(3.png) no-repeat center}[/font][/color][*][color=#ffa500][font=Courier New]li.four{ background:url(4.png) no-repeat center}[/font][/color][*][*][color=#ffa500][font=Courier New]/* *html For IE6 PNG */[/font][/color][*][color=#ffa500][font=Courier New]ul.png li.one{ background:url(1.png) no-repeat center}[/font][/color][*][color=#ffa500][font=Courier New]*html ul.png li.one{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="1.png"); background:none; width:104px; height:104px;}[/font][/color][*][color=#ffa500][font=Courier New]ul.png li.two{ background:url(2.png) no-repeat center}[/font][/color][*][color=#ffa500][font=Courier New]*html ul.png li.two{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="2.png"); background:none; width:128px; height:128px;}[/font][/color][*][color=#ffa500][font=Courier New]ul.png li.three{ background:url(3.png) no-repeat center}[/font][/color][*][color=#ffa500][font=Courier New]*html ul.png li.three{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="3.png"); background:none; width:128px; height:128px;}[/font][/color][*][color=#ffa500][font=Courier New]ul.png li.four{ background:url(4.png) no-repeat center}[/font][/color][*][color=#ffa500][font=Courier New]*html ul.png li.four{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="4.png"); background:none; width:128px; height:128px;}[/font][/color][*][color=#ffa500][font=Courier New]-->[/font][/color][*][font=Courier New][color=olive]</[/color][color=green]style[/color][color=olive]>[/color][/font][*][font=Courier New][color=olive]</[/color][color=green]head[/color][color=olive]>[/color][/font][*][font=Courier New][color=olive]<[/color][color=green]body[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]ul[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]h2[/color][color=olive]>[/color][color=gray]如果你使用的是IE6.0，那么你看到的PNG图像将是不透明的(未使用CSS滤镜)[/color][color=olive]</[/color][color=green]h2[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]li[/color]
[color=#00008b]class[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]one[/color][color=#8b0000]"[/color][color=olive]></[/color][color=green]li[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]li[/color]
[color=#00008b]class[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]two[/color][color=#8b0000]"[/color][color=olive]></[/color][color=green]li[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]li[/color]
[color=#00008b]class[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]three[/color][color=#8b0000]"[/color][color=olive]></[/color][color=green]li[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]li[/color]
[color=#00008b]class[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]four[/color][color=#8b0000]"[/color][color=olive]></[/color][color=green]li[/color][color=olive]><[/color][color=green]a[/color]
[color=#00008b]href[/color][color=gray]=[/color][color=#8b0000]""[/color]
[color=#00008b]target[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]_blank[/color][color=#8b0000]"[/color][/font][*][font=Courier New][color=gray]    </[/color][color=green]ul[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]ul[/color]
[color=#00008b]class[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]png[/color][color=#8b0000]"[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]h2[/color][color=olive]>[/color][color=gray]如果你使用的是IE6.0，那么你看到的PNG图像将是透明的(已使用CSS滤镜)[/color][color=olive]</[/color][color=green]h2[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]li[/color]
[color=#00008b]class[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]one[/color][color=#8b0000]"[/color][color=olive]></[/color][color=green]li[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]li[/color]
[color=#00008b]class[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]two[/color][color=#8b0000]"[/color][color=olive]></[/color][color=green]li[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]li[/color]
[color=#00008b]class[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]three[/color][color=#8b0000]"[/color][color=olive]></[/color][color=green]li[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]<[/color][color=green]li[/color]
[color=#00008b]class[/color][color=gray]=[/color][color=#8b0000]"[/color][color=red]four[/color][color=#8b0000]"[/color][color=olive]></[/color][color=green]li[/color][color=olive]>[/color][/font][*][font=Courier New]
[color=olive]</[/color][color=green]ul[/color][color=olive]>[/color][/font][*][font=Courier New][color=olive]</[/color][color=green]body[/color][color=olive]>[/color][/font][*][font=Courier New][color=olive]</[/color][color=green]html[/color][color=olive]>[/color][/font][/list]

[[i] 本帖最后由 hkysj 于 2008-4-23 10:23 编辑 [/i]]

恩，知道这个，遂就没用PNG的，当然了，如果效果要求高，那是要用的，我是想等到IE6兼容了，或者“消失”了再用，HOHO

这个很适用啊.

要求高点的就要png格式