【发布时间】：2010-10-16 09:49:46
【问题描述】：
如何修复 IE6 中背景图片的 PNG 透明度问题？
【问题讨论】：
-
有用的问题。我以为 IE 6 已经死了，但不是 :(
标签： internet-explorer png internet-explorer-6 transparency
【发布时间】：2010-10-16 09:49:46
【问题描述】：
我喜欢 David Cilley 不久前编写的这个 Javascript 解决方案。它不受兼容浏览器的影响，可以与您想要的任何后端一起使用。不过，它仍然需要一个空白的 gif 图像。
将这些函数添加到您的 HTML Header 或其他现有 .js 包括：
<script type="text/javascript">
function fixPngs(){
// Loops through all img tags
for (i = 0; i < document.images.length; i++){
var s = document.images[i].src;
if (s.indexOf('.png') > 0) // Checks for the .png extension
fixPng(s, document.images[i]);
}
}
function fixPng(u, o){
// u = url of the image
// o = image object
o.src = 'images/spacer.gif'; // Need to give it an image so we don't get the red x
o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + u + "', sizingMethod='scale')";
}
</script>
将以下条件注释放在底部（页脚部分，就在前面 正文> ):
<!--[if lte IE 6]>
<script language="javascript" type="text/javascript">
//this is a conditional comment that only IE understands. If a user using IE 6 or lower
//views this page, the following code will run. Otherwise, it will appear commented out.
//it goes after the body tag so it can fire after the page loads.
fixPngs();
</script>
<![endif]-->
如需更全面的 IE6 异常处理方法，请尝试IE7 Javascript library。
【讨论】：
-
您确定这适用于使用 CSS 应用的背景图像吗？
-
它不适用于此设置中的背景图像，仅适用于 img 标签。
-
解决方案有效，但改变了我的图像的纵横比。为了解决这个问题，我在使用
var oldw = o.clientWidth; var oldh = o.clientHeight;调用AlphaImageLoader 之前保存了原始大小，并在使用if(o.style) { o.style.width = oldw +"px"; o.style.height = oldh +"px"; }调用之后恢复了
使用这个： http://www.twinhelix.com/css/iepngfix/
这也适用于 IE 5.5，但不适用于 IE 的 mac 版本或更早版本的 IE。
我在很少的网站上使用过它，并且没有遇到任何问题。
但在脚本启动之前，PNG 周围有时会出现一个丑陋的灰色框。
【讨论】：
-
非常感谢。你用 IE6 完成了我的噩梦。我认为 IE 6 已经死了，但不是。透明 png 修复的最佳解决方案。 +1
ie6.css：
img {
behavior: url("pngbehavior.htc");
}
page.html:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
【讨论】：
我要在这里获得死灵法师徽章。 :)
这并不完全是一个修复，而是我不时使用的一种方便的解决方法，以支持 IE6 上的透明度，而无需任何额外代码。它并不总是符合要求，但经常符合要求。
这个想法是，大多数情况下，无论如何您都需要在固定颜色背景上显示 PNG。 PNG 文件可以具有指定的背景颜色，IE6 将支持它。您所做的是获得TweakPNG 实用程序并打开您的PNG 文件。在那里您将能够添加一个bKGD 块，它指定所需的背景颜色。只需输入显示 PNG 所需的颜色即可。
注意 - PNG 文件通常包含一些值以补偿不同的显示设备。可能有诸如预期的色彩空间、色度、伽马等之类的东西。这些本身并不坏，但 IE 以某种方式误解了它们，结果是 PNG 显示得比它们应该的更暗（或者 IE 可能是唯一做对的人？我不记得了……）
无论如何，如果您希望每个浏览器都以相同的方式显示您的 PNG，您应该使用上述实用程序删除这些块。
【讨论】：
twinhelix png fix 应该可以帮助你
【讨论】：
【讨论】：
请注意，AlphaImageLoader 转换可以deadlock IE6。
使用 PNG8s 而不是常规的 PNG32。您被限制为 256 种颜色和 1 位 alpha 透明度，但它比随机死锁浏览器要好。
【讨论】：
您可以勇敢地声明您的网站在 IE6 上可能无法很好地呈现。也许不是最具商业头脑的方法，但如果我们让 IE6 死掉，我们会帮自己一个忙（甚至是微软）。当然，由于大量在线活动发生在安装了 IE6 的公司机器上，这不会很快发生。 :(
【讨论】：
-
我同意。除了公司网站之外的任何东西都应该遵守标准并忽略 IE。
-
一个公司网站更有理由坚持标准，跨浏览器的开发成本比规定浏览器要高得多，所以你不妨说它是一个只有标准的网站符合标准的浏览器。
-
您忘记了失去没有您支持的浏览器并且不愿意转换的客户的成本。该成本可能比多浏览器支持的成本高出天文数字。
-
@Mystere：我认为您不能那么认真地对待这个答案。我确实说过这不是一种具有商业头脑的方法。与许多对每个人都有好处的事情一样（例如更好地管理环境和消除贫困），有意义的事情通常并不具有商业意义。
-
可以放弃IE6。严重地。尽管它的市场份额仍略高于 21%。
1.在文档的head块中为IE6添加条件css：
<!--[if (IE 6)]>
<link rel="stylesheet" type="text/css" href="locationOfyourCss/ie6.css"/>
<![endif]-->2.在您的元素中分配类名：
<td class = yourClassName>
3.在ie6.css中，应用过滤器。您必须指定宽度和高度。将背景图像设置为 clear.cache.gif，如果没有这些属性，过滤器将无法工作：
.yourClassName{
width:8px;
height:22px;
background: url("locationOfBlankImage/clear.cache.gif");
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filePath/imageName.png', sizingMethod='scale');
}
【讨论】：
我正在做的一个项目是从 Paul Irish 的 HTML5 Boilerplate 中获得灵感，并将条件样式分配给 整个页面。他详细介绍了here，但简而言之，这个想法是在您网站上每个页面的 HTML 中添加条件检查，应用于 body 标记。像这样：
<!--[if lt IE 7 ]> <body class="ie6 pageStyle"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7 pageStyle"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8 pageStyle"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9 pageStyle"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body class="pageStyle"> <!--<![endif]-->
IE 浏览器将读取这些 cmets 并应用这些样式。其他浏览器会忽略它。这样做的好处是您可以设计符合标准的网站，使用 PNG 等等。然后，在您的 CSS 中，在标准样式之后添加其他样式，为 IE 浏览器提供所需的样式。例如，我正在研究的一种样式使用 PNG 背景图像。为了让这个在 ie6 中玩得更好，我可以使用 javascript/htc 来替换它们，应用那里的许多 hack 之一。或者我可以这样做：
.someStyle {
background: url(/images/someFile.png) no-repeat;
background-position: -0px -280px;
}
.ie6 .someStyle {
background: url(/images/someFile.gif) no-repeat;
background-position: -0px -280px;
}
通过向我的 ie6 用户提供 GIF，没有占用 CPU 的变通过程，如果您曾经在可能运行 ie6 的那种 POS 机上进行过测试，这实际上是一个非常大的问题。而且，我没有放弃任何质量，让我的好用户拥有好的浏览器。
它确实需要两个单独的文件，但我认为它比大多数实现更简洁。此外，使用 .ie6 .whatever 代替单独的 ie6.css 文件，可以使您的修复紧挨着它们所应用的样式，我发现它更简洁且更易于使用。它还鼓励您随时考虑 ie6 用户，而不是完成您的设计然后惊恐地回头
【讨论】：
这是关于这个问题的great article。总之，它提供了一个名为 SuperSleight 的 JS 库。我过去使用它取得了相当大的成功。
【讨论】：
-
我的页面上有一个 FlexSlider2 幻灯片，所有其他 PNG 修复方法和库都毁了幻灯片。 SuperSleight 是唯一有效的。谢谢。
好的，我对 html/js 几乎是新手，但我想我必须稍微改变一下 Rob Allen 的答案来解决两个问题：
- AlphaImageLoader() 正在更改我的图像的纵横比，因此我需要在图像加载之后恢复原始大小。
- 如果从 html 末尾调用 fixPngs()，则在加载文档之后但在加载所有图像之前调用。
所以我已将我的 fixPngs() 更改为仅附加一个事件：
function fixPngs() {
// Loops through all img tags
for(i = 0; i < document.images.length; i++) {
var u = document.images[i].src;
var o = document.images[i];
if(u.indexOf('.png') > 0) {
o.attachEvent('onload', fixPng);
o.src = u;
}
}
}
fixPngs() 仍在从 html 末尾调用：
<!--[if lte IE 6]>
<script language="javascript" type="text/javascript">
// Do this after the page loads
fixPngs();
</script>
<![endif]-->
现在 fixPng() 获取调用者，分离事件，保存原始尺寸，调用 AlphaImageLoader() 并最终恢复尺寸：
// u = url of the image
// o = image object
function fixPng(e) {
var caller = e.target ||
e.srcElement ||
window.event.target ||
window.event.srcElement;
var u = caller.src;
var o = caller;
if(!o || !u)
return;
// Detach event so is not triggered by the AlphaImageLoader
o.detachEvent('onload', fixPng);
// Save original sizes
var oldw = o.clientWidth;
var oldh = o.clientHeight;
// Need to give it an image so we don't get the red x
o.src = 'images/spacer.gif';
o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ u +"', sizingMethod='scale')";
// Restore original sizes
if(o.style) {
o.style.width = oldw +"px";
o.style.height = oldh +"px";
}
}
我是不是太过分了？
【讨论】：