14

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

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

4

7 回答 7

13

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

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

但是所有这些都归结为应用了过滤器并删除了背景。

于 2008-09-24T21:49:44.383 回答
1

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

于 2008-09-24T21:57:08.577 回答
1

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

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

它很容易添加到现有网站，处理各种图像（表单按钮、背景、常规 IMG 标签等），并使您的 CSS 美观整洁。

于 2008-09-24T22:00:50.673 回答
1

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

对于小范围的背景和任何透明的前景图形，该修复应该是可以的，但我再次建议不要设计一个使用 Internet Explorer 使用大量透明度的网站。

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

于 2008-09-24T22:08:09.923 回答
1

另一种解决方法是使用 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。

唯一的缺点是您必须有两个单独的图像，并且设计在跨浏览器时可能看起来不完全相同，但只要它看起来没有损坏就可以了。

于 2008-10-02T11:43:16.293 回答
1

这里有 2 个不使用 AlphaImageLoader 过滤器的选项。

对我来说，如果仅将乱码 .gif 发送到 IE6 是不可行的，我会使用Fireworks 将 IE6 友好的调色板添加到 .PNG。

于 2010-07-02T05:22:18.853 回答
0

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

于 2008-09-24T21:50:27.283 回答