IE6显示png透明背景、图片的方法

最新推荐文章于 2025-05-09 16:22:52 发布

xiaoaifei2010

最新推荐文章于 2025-05-09 16:22:52 发布

阅读量364

点赞数

分类专栏： css

4 篇文章

订阅专栏

本文介绍了解决IE6浏览器不支持PNG背景透明显示的方法，包括使用CSS滤镜和JavaScript代码进行调整，确保页面元素正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，目前，最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明，会显示一个灰色的框。解决的办法也是有多种，在这里列出常用的其中一种：

IE6显示透明PNG背景：

使用css滤镜。

CSS Code复制内容到剪贴板

background-image:none，filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/images/bg.png

例如：

CSS Code 复制内容到剪贴板

.main{background:url(../images/bg.png) no-repeat; width:960px; _background-image:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/images/bg.png");}

值得注意的是，此时div会被遮盖，该div下面的链接将不可点击，可以在main下面的div加上position:relative就可以了。

IE6显示透明PNG图片：

在网页的头部head之间加入下面的javascript代码：

JavaScript Code 复制内容到剪贴板

<!--[if IE 6]>
<script language="javascript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->