IE6下png图片背景透明,让IE支持PNG透明的解决方法
ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明。
首先陈述一下我的问题：本人主要想使IE6版本以下的浏览器支持CSS样式表控制的png背景ALPHA透明。其他的方法不能做到这点，我没全试过，好像，如果使用Float，背景和一些元素都会出现问题，具体的问题自己也无法确切说出，如果要用一句话来概括的话，那就是它会使CSS浮动絮乱。。网上提供了好几套方案，有的是利用JS，之中方法对少量的页面的中的PNG图片还行，如果解决大量png背景就很麻烦。今天我着重介绍一种比较好的方法。因为其他的方案不能满足我的要求。
解决方法：IE PNG Fix v1.0 / 2.0 Alpha 3
这是目前最新版本，今天重点介绍的一个方法。IE PNG Fix- 文件比较多，不过，也不麻烦。具体步骤：
(以下是英文翻译过来的,可能不太通顺,大致理解以下就行,实际很好操作的.)
使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件来修正PNG alpha 透明度。
- 支持<img src=”">元素。
- 支持的背景PNG图像（不像许多其他的脚本！ ）
- 支持CSS1背景重复和位置（通过可选插件）
- 背景图像可以被界定内置或在外部的样式表。
- 自动处理改为**/背景通过正常的JavaScript （例如鼠标悬停翻车） -没有特殊的编码需要。
- 改变支持包括CSS的’类别’的变化因素。
- 采用自动变通的<a href=”">要素巴布亚新几内亚背景因素。
- 微小的脚本（快速下载） 。
- 领有牌照的下一个自由软件许可证。遵循这些简单的步骤，将此添加到您的网页：
- 复制并粘贴iepngfix.htc和blank.gif到您的网站文件夹中。
- 复制并粘贴到您的网站的CSS或HTML ：
<style type=”text/css”>
img, div { behavior: url(iepngfix.htc) }
</style>
这里的CSS选择器必须包含标签/内容，给它一个逗号分隔的清单上的标签使用。它还必须包括正确的路径。iepngfix.htc相对H TML文件的位置（不相对的CSS文件!） 。 例如，你可以这样使用：
<style type=”text/css”>
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>
作用是：使img,div,input类选择符中的PNG图片以及png背景图片实现透明。
如果您的网站使用的子文件夹，打开iepngfix.htc文件在文本编辑器如Windows记事本，并改变blankImg变数，包括正确道路blank.gif像这样：
IEPNGFix.blankImg = ‘/images/blank.gif’;
同样的路径是相对的HTML文件。否则，你将看到一个“破碎的形象”的图形！
另外，你也可以使用网址来定义路径。比如将/images/blank.gif 换成http://您网站的网址/images/blank.gif ,这在css中url（）都可以使用。
如果你想支持CSS1版本背景重复和背景位置，请务必包括附加js文件在您<head> ：注意：V1。0版本不需要加此文件，本站提供的是2。0版本。
<script type=”text/javascript” src=”iepngfix_tilebg.js”></script>
否则，背景图片可以工作，但不会重复。css2以上不需要加.
所要用的文件下载:V2。0版本
原官方网站（英文）：http://www.twinhelix.com/css/iepngfix/
本人的站点目前的皮肤也是使用这种方法获得的透明效果。可以参考。
注意： v1.0 版本（可到官方英文网站下载），相对V1.0,使用V2.0您必须遵循更加严格规范的CSS语法.如果使用了PNG透明图片作为背景类选择符中包含一些像单击换验证码等js脚本的话，可能会失效（只是在IE6中）。具体可以单击本人网站右侧顶部成员登陆通道验证码部分看看，就知道我说的是怎么回事了。解决的办法就是尽量不要在此DIV层上使用PNG图片。推荐大家使用V2.0版本。如果背景图片错位,请设置其宽度和高度即可)
另附:
1.通过javascript 和 css 滤镜解决IE6下PNG图片不透明的问题的方法:
http://www.54caizi.org/post/enablePngImages.html(适合网页中单独存在的png透明图片)
2.本站另外一篇:利用CSS解决IE6下PNG背景图片alpha透明显示之方法二[微软提供的方案,适合图片较少的情况使用此方法]
希望大家交流使用经验！
Loading ...