题

我已经习惯了的想法，如果我想要的/需要使用alpha-trans Png在跨浏览器的方式，我使用的背景图像div然后，在IE6只CSS，标记的背景为"无"，并包括适当的"过滤器"的参数。

是否有另一种方式?一个更好的办法？有没有办法这样做的img tag而不是与背景图像？

有帮助吗？

解决方案

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

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

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

其他提示

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

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

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

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

有关如何编写DHTML行为的介绍，请尝试此链接。

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

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

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

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

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

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

对我来说，如果发乱蓬蓬的.gif到IE6仅是不可行的，我用的 烟花中添加一个IE6友好的调色板。PNG.

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top