秦歌 发表于 2008-1-29 15:52:33

如何让PNG格式的透明图片在IE6下正常显示

初学网页设计的朋友可能都会碰到这样的问题,需要在网页插入一透明图片。如果使用Gif格式的透明图片,可能像素低,显示不够清晰。如果用PNG格式透明图片,在IE6下将达不到透明效果,而是灰色的背景。这会让你的网页看上去非常丑陋,任何一个网页设计师都不想出现这样的问题,下面是一个小小的教程,教你如何让PNG格式的透明图片在IE6下同样能够正常显示。

我们先来看看在透明PNG图片在Mozilla Firefox和Internet Explorer 6中的显示差异:

Mozilla Firefox

PNG透明图片在Mozilla Firefox下显示良好。
http://parandroid.com/wp-content/uploads/2008/01/png-in-firefox.gif
Internet Explorer 6

在IE6中这张PNG图片的背景却是一片灰白,真的很难看,除非你的网页背景色就是一片灰白:)
http://parandroid.com/wp-content/uploads/2008/01/png-in-ie.gif
解决方法

首先,为你的图片外套一个DIV层,像这样:

<body> <div class=”flower”></div> </body>

然后,在CSS文件里面写入: body {background-color:#000}

div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}呃,这是指Mozilla Firefox,要让其在IE6下面正常显示,你应该在<head>和</head>之间写入:<!–>

<style type="text/css">

div.flower {

background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);

}

</style>

<!–>这样,就OK了,下面是加了上面代码后的IE显示图:
http://parandroid.com/wp-content/uploads/2008/01/png-in-ie2.gif

hongkongs 发表于 2008-1-30 03:08:13

:loveliness: :funk:
页: [1]
查看完整版本: 如何让PNG格式的透明图片在IE6下正常显示