Question

我已经习惯了如果我想/需要以跨浏览器的方式使用alpha-trans PNG，我在div上使用背景图像，然后在IE6-only CSS中标记background为“none”并包含正确的“过滤器”参数。

还有其他方法吗？更好的方法？有没有办法用img标签而不是背景图像？

Answer 1

底线是，如果你想在PNG中使用alpha透明度，并且你希望它在IE6中工作，那么你需要应用AlphaImageLoader过滤器。

现在，有很多方法可以做到这一点：浏览器特定的黑客攻击，条件注释，Javascript / JQuery / JLibraryOfChoice元素迭代，服务器端CSS通过UserAgent嗅探...

但是所有人都应该使用过滤器并删除背景。

Answer 2

这很可能是“最好”的方式。但请记住，当涉及PNG文件时，IE6不能正确实现alpha-trans;由于IE没有正确实现伽玛，因此颜色空间已损坏，因此PNG文件通常显示“比它们应该更暗”。
我们在最近的一个项目中实现的一个替代“解决方案”是使用“toGif”类标记每个png图像，在CSS中调用自定义行为.htc，如果浏览器是，则将.png扩展名更改为.gif检测到我们已标记为问题。我们只是在同一路径中包含每个PNG的GIF版本，如果发现浏览器不能正确处理PNG，则会将其与图像的GIF版本交换出来。因此，我们牺牲了alpha混合，有利于保证全透明度和颜色准确性，只有当我们知道它可能不会看起来正确时才这样做。
它可能不是一个理想的解决方案，但我认为这是跨浏览器的本质编辑：实际上现在我看看有问题的项目，我们使用了一个名为“alpha”的img类的.htc行为，它会自动在图像上抛出正确的过滤器。所以你使用javascript而不是IE6纯粹的CSS黑客来检测浏览器，所以它可能会更优雅......但它基本上是一样的。
有关如何编写DHTML行为的介绍，请尝试this link。

Answer 3

这是我喜欢的特定解决方案，使用Javascript（jQuery）：

http://jquery.andreaseberhard.de/pngFix/

可以轻松添加到现有网站，处理各种图像（表单按钮，背景，常规IMG标记等），并使您的CSS保持干净整洁。

Answer 4

图像加载程序是IE6唯一可用的修复程序。请注意，它的PNG支持非常简陋（与IE7一样），并且无法正确处理循环透明背景。在尝试使用透明容器设计网站时，我学到了很多。当然，在Firefox中完美地工作。

修复应该适用于小区域的背景和任何透明的前景图形，但我再次建议不要设计一个使用Internet Explorer大量透明的网站。

最后，我的解决方案是为IE显示一个平面颜色，但保留了其他浏览器的透明度。幸运的是，最终没有对设计造成太大伤害。

Answer 5

另一种方法是使用2个单独的图像，例如GIF和透明PNG，并相应地定位CSS：

/* for IE 6 */
#banner {
    background:url(../images/banner.gif);
}

/* for other browsers */
html > #banner {
    background:url(../images/banner.png);
}

IE 6不理解CSS子选择器，因此将忽略该规则，而理解它的浏览器将为您提供一个漂亮的透明PNG。

唯一的缺点是你必须有两个单独的图像，并且设计可能看起来不是完全相同的跨浏览器，但只要它看起来不会破坏你应该没问题。

Answer 6

以下是2个不使用AlphaImageLoader过滤器的选项。

DD_belatedPNG by Drew Diller：使用基于VML的解决方案而不是AlphaImageLoader过滤器。
PNGPong：基于Flash的解决方案

对我来说，如果仅向IE6发送乱码.gif是不可行的，我使用Fireworks to add an IE6-friendly palette to the .PNG。

Answer 7

img元素的常用解决方案是将src更改为指向1x1像素透明GIF，然后使用相同的过滤器黑客。

IE6与透明PNG有关

7 个答案: