IE6下png图片透明问题

淩亂°似流年 2022-08-13 13:42 227阅读 0赞

以前用到png图片的时候，总是担心，IE6下会出现的灰色背景，所以一直用gif格式的图片来替换png格式的图片，代码如下：

.pngImg \{

background:url(image.png);

\_background:url(image.gif);

\}

在其他浏览器下调用的是图片image.png，IE6识别\_,调用image.gif图片，这样做有些缺点，就是gif图片显示会有锯齿，边缘不平滑。

网上还有其他的方法来解决这个问题，如css滤镜，但是css滤镜不支持backgrond-position和background-repeat，后来在网上查找到了使用DD\_belatedPNG，测试代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>png图片透明问题</title>

<style>

.png\{

width: 100px;

height: 100px;

background: url(png.png);

\}

.png2\{

width: 100px;

height: 100px;

\}

</style>

<!--\[if IE 6\]>

<script type="text/javascript" src="DD\_belatedPNG\_0.0.8a-min.js" ></script>

<script type="text/javascript">

DD\_belatedPNG.fix('.png');

DD\_belatedPNG.fix('.png2');

</script>

<!\[endif\]-->

</head>

<body>

<div class="png"></div><br><br>

<div><img class="png2" src="png.png"></div>

</body>

</html>

在IEtester下的测试效果如下：

DD\_belatedPNG\_0.0.8a-min.js的下载地址是：

[http://dillerdesign.com/experiment/DD\_belatedPNG/\#download][http_dillerdesign.com_experiment_DD_belatedPNG_download]

DD\_belatedPNG不仅可以用在img上还可以用在background上，并且支持backgrond-position和background-repeat。自己感觉这种方法很完美的解决了IE6下png图片透明这个bug。

[http_dillerdesign.com_experiment_DD_belatedPNG_download]: http://dillerdesign.com/experiment/DD_belatedPNG/#download

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 IE6下png图片透明问题

以前用到png图片的时候，总是担心，IE6下会出现的灰色背景，所以一直用gif格式的图片来替换png格式的图片，代码如下： .pngImg \{ background:u

淩亂°似流年/ 2022年08月13日 13:42/ 0 赞/ 228 阅读

相关让ie6支持png透明

让ie6支持png透明需要三个文件：DD\_belatedPNG\_0.0.8a-min.js、ie6Fixpng.js、说明.txt 具体三个文件里的内容： 1、DD\_

妖狐艹你老母/ 2022年08月06日 13:08/ 0 赞/ 226 阅读

相关 ie6 下png背景透明

1. IE css 滤镜 IE css滤镜中有一个使png背景透明的滤镜，JavaScript方法也是应用的这个滤镜实现png背景透明的。写法：filter:progid

深碍√TFBOYSˉ_/ 2022年07月15日 23:10/ 0 赞/ 199 阅读

相关解决IE6下无法显示png图片问题

由于png图片在ie6下不能正常显示，经过多方查找资料，一个比较通用的方式就是采用滤镜：这个方法有一个不太好的地方，就是会破坏原来的<img>,因为他是将<img>替

淩亂°似流年/ 2022年06月16日 12:25/ 0 赞/ 232 阅读

相关 png兼容IE6

<!--\[if lte IE 6\]> <script src="module/index/templates/default/js/iepng.js" type="te

喜欢ヅ旅行/ 2022年06月16日 11:46/ 0 赞/ 248 阅读

相关 IE6 png8 图片显示处理

<!--[if IE 6]> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-

系统管理员/ 2022年04月24日 07:20/ 0 赞/ 190 阅读

相关 png24图片在IE6下的透明度问题

png24图片中IE6下的透明度问题相信对于每个前端开发人员来说并不陌生！PNG(Portable Network Graphics)是W3C推荐的网页图片通用格式，但是Mi

女爷i/ 2022年01月09日 16:05/ 0 赞/ 263 阅读

相关 IE6下PNG32图片的透明

1、滤镜 filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabl

浅浅的花香味﹌/ 2022年01月06日 17:17/ 0 赞/ 230 阅读

相关 IE6中 PNG 背景透明的最佳解决方案

为什么要使用 PNG 图片？简单来说，使用 PNG 格式比起 GIF 来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多。目前，最新的浏览器基本

港控/mmm°/ 2021年12月10日 09:05/ 0 赞/ 287 阅读

相关修复IE6 PNG不透明问题的最佳解决方案

IE6是不支持透明的PNG的，虽然每个web开发人员都恨死了IE6，但是在我们伟大的祖国，IE6的用户还占着极大的数量优势，所以我们不能随意的抛弃他们。有个很稳妥的解决方案

忘是亡心i/ 2021年10月18日 15:44/ 0 赞/ 284 阅读