e路上-eRoading.com» Blog Archive » IE6实现PNG图片透明

IE6实现PNG图片透明

Posted in Web前端开发 by eroading on 12-13-2008.

png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利! 但目前IE6中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给”.png”格式的图片加个灰色背景。e路上列出3种可以解决IE6 PNG图片透明度问题的方法，供大家参考。

1..htc文件的修复方法

下载.htc文件，然后指定你希望实现PNG支持的那个元素/标签。想了解更多的话，这有在线Demo和安装说明.

2.JavaScript修复方法

SuperSleight

这是我印象中修复IE6的PNG问题的最好的JavaScript方法。如果想了解更详细的使用方法，可以查看24ways.org的教程

Google Code

我偶然发现这个简单的Google Code，但这个脚本的缺陷是只能修复名为*-trans.png的PNG图片。还有一个遗憾之处，就是透明背景图片无法使用background-repeat平铺，也无法使用background-position来定位。

3.CSS修复方法

我无意中发现了这个可以让工作更加有效的方法，使用了CSS和IE的条件标签。

效果预览下载实例

步骤一:HTML

我们可以先创建一个HTML文件，然后添加一个类名为”vehicles”的空div。

<div class=”vehicles”></div>

步骤二:样式表

下面来创建一个名为style.css的样式表并添加以下代码:

body {
   background: url(body-bg.jpg); /* 添加基本背景图 */
}
.vehicles {
   width: 500px;
   height: 176px;
   background: url(vehicles.png) no-repeat; /* 为vehicles类添加背景图 */
}

步骤三:IE样式表

下面我们来创建另一个样式表，命名为IE.css。现在，我们都知道IE讨厌PNG文件，那我们就要在这里施展魔法了:

/* 注:我在vehicles类名前添加了”html”, 我这样做就不会使background属性与另一个样式表冲突了. */
html .vehicles {
   background: none; /* 隐藏当前背景图从而使用后面的滤镜重置它 */
   width: 500px; /* 必须指定宽度 */
   height: 176px; /* 必须指定高度 */
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’vehicles.png’);
}

步骤四:IE条件注释

这是最后一步。现在我们回到步骤一中的html文件，然后我们来读取之前创建的所有样式表。

在你的文件顶部中添加以下代码: