3种修复IE6 PNG图片透明度问题的方法

  当我在自己的网页设计项目中尝试使用据有透明度的PNG图片的各种方法时,我开始寻找各种能让PNG图片在IE6下正常工作的方法。我们都知道,IE6对于PNG的不透明度支持的并不好。暴风彬彬曾经发表过CSS完美实现垂直居中的方法,如果您有兴趣也可以参考。

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文件,然后我们来读取之前创建的所有样式表。

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

<link rel=”stylesheet” href=”styles.css” type=”text/css” />
<!–[if IE 6]>
    <link rel=”stylesheet” href=”IE.css” type=”text/css” />
<![endif]–>

*注:我在第二行使用了IE条件注释,这就是为什么我没有将两种样式放在同一个样式表中,而把专门用于IE6的样式表单独定义的原因。这样更有利于日后管理。

总结

  这些就是我总结的几个解决IE6下PNG问题的方法,优点在于遵从XHTML,而且缩减了页面的代码量。

  如果您有其他更好的方法,欢迎浏览/评论,一同分享您的方法。

  彬Go会经常更新前端开发/CSS技巧等相关技术及教程文章,欢迎订阅本博客来及时浏览本博客的最新教程及资源。

您还可以参考以下CSS相关教程:
目前非常全面的CSS兼容问题资料汇集》 
目前比较全的CSS重设(reset)方法总结

英文原文:PNG Transparency Fix in IE6
翻译原文:3种修复IE6 PNG图片透明度问题的方法(暴风彬彬)

转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/png-transparency-in-ie6.html
如需转载必须以链接形式注明原载或原文地址,谢谢合作


36 Comments

发表评论

  • ftium4
    2011-08-15

    真奇诡,全部我都在ietester里打开了都没用,难道ietester有bug?和真实ie不同吗?

  • atwind
    2011-05-04

    直接无视IE6了,建议客户端用IE9

  • 网站建设技集 » Blog Archive » 修复IE6 PNG图片透明度问题的方法
    2010-05-08

    […] 英文原文:PNG Transparency Fix in IE6 翻译原文:3种修复IE6 PNG图片透明度问题的方法(暴风彬彬) […]

  • eric
    2009-06-02

    很好的资料整理。谢谢。

  • cheney
    2009-03-14

    background-position 好像都不行的么,哪种是可以,使IE6中也能背景定位

  • NetPuter
    2008-12-10

    在CB和YeeYan看到你的很多文章,感觉不错,订阅and踩!

  • 毛毛虫
    2008-12-10

    好厉害,学习了

  • popdo
    2008-12-10

    哈。我前些天也为ie6不能透明png而苦恼·后来问题解决了并且在博客中也写有相关的文章。我的做法是将png保存为gif格式!

  • 3种修复IE6 PNG图片透明度问题的方法 » china-amb
    2008-12-09

    […] 英文原文:PNG Transparency Fix in IE6 翻译原文:3种修复IE6 PNG图片透明度问题的方法(暴风彬彬) […]

  • k4u_fish
    2008-12-09

    解决我的难题了,呵呵