如何在不支持PNG透明度的浏览器中实现PNG透明度？

Question

如何在不支持PNG透明度的浏览器中实现PNG透明度？

browserpngtransparency

12

我们（心爱的）设计师不断制作具有透明背景的PNG文件，用于我们的应用程序中。我想确保这个PNG的特性在“旧”的浏览器中也能正常使用。最好的解决方案是什么？

以下是编辑内容

@mabwi & @syd - 我是否同意使用PNG并不重要。这是一个我需要解决的问题！

@Tim Sullivan - IE7.js看起来很酷，但我不想引入应用程序的所有其他更改。我希望有一种专门解决PNG问题的解决方案。谢谢提供链接。

- irob

11个回答

5

我在这里找到了一个看起来非常好的解决方案：Unit Interactive -> Labs -> Unit PNG Fix

更新：Unit PNG 还被列入NETTUTS上PNG修复选项列表

以下是他们网站上的亮点：

非常紧凑的JavaScript代码：不到1kb！
修复了IE的filter属性引起的一些交互问题。
适用于img对象和background-image属性。
自动运行。您无需定义类或调用函数。
允许自动宽度和自动高度元素。
部署超级简单。

- irob

2

在IE6中使用PNG与其他浏览器并没有太大的区别。您可以在CSS中支持所有的内容，而无需使用Javascript。我以前就看过这个技巧...

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;
}

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}

我不太确定这是否是有效的CSS，但根据网站的情况，这可能并不那么重要。

（值得注意的是，第一张图片的URL基于样式表的目录，而第二张图片的URL基于正在查看的页面的目录 - 因此它们不匹配）

- HBoss

2

@Hboss

如果您确切地知道您将要显示的所有文件（以及每个文件的尺寸），那么所有都很好，这样维护CSS文件可能会非常麻烦，但我认为这是可能的。当您想开始使用透明PNGs进行某些非常常见的用途时：a）次要图像（例如不同大小的图标），可以在任何背景下使用，和b）重复的背景；那么您就完了。我尝试过的每个解决方法在某些时候都遇到了障碍（当背景透明时无法选择文本，有时显示的图像大小很奇怪等等），我发现为了最大可靠性，我必须恢复到GIF。

我的建议是尝试使用PNG透明度技巧，但同时意识到它肯定不完美-请记住，您为7岁以上的浏览器用户费心。我现在的做法是在IE6用户首次访问网站时弹出窗口，友善地提醒他们，他们的浏览器已过时，无法提供现代网站所需的功能，虽然我们会尽力为您提供最好的体验，但如果您升级最新版本的浏览器，您将获得更好的体验。

- nickf

到目前为止，我们网站的使用IE6的人数占13％。这些流量几乎全部来自Facebook - 因此，大约有13％的Facebook用户使用IE6。虽然很糟糕，但这就是现实。 - Simon_Weaver

我维护的网站大约有40％的IE7，32％的IE6和18％的Firefox。 - nickf

2

IE7.js将为IE6提供PNG支持（包括透明度）。

- Tim Sullivan

我尝试了许多解决方案，但这个真的做到了！它还有许多其他很棒的功能，因为它试图使Microsoft Internet Explorer表现得像一个符合标准的浏览器。它修复了许多HTML和CSS问题，并使透明PNG在IE5和IE6下正确工作。 - Kasper

因此我向每个人推荐它！（对于额外的评论感到抱歉） - Kasper

2

我曾尝试使用.png文件创建网站，但是这并不值得。网站变得缓慢，并且你使用的hack并不能百分之百地有效。这里有一篇关于一些选择的好文章，但我的建议是找到一种方法使gif文件可用，直到您不再需要支持IE6。或者只为IE6提供降级体验。

- Lance Fisher

0

如果您从Fireworks中将图像导出为PNG-8，则它们的行为与gif图像相同。因此，它们不会看起来模糊和灰暗，透明度将是透明度，但它们不会具有其他浏览器所具有的完整的24位美感。

也许不能完全解决您的问题，但至少您可以通过重新导出它们来部分解决问题。

- Tom

0

有一件事需要考虑，那就是电子邮件客户端。通常情况下，您希望使用PNG-24透明度，但在使用IE6的Outlook 2003中，电子邮件客户端不允许使用CSS或JS技巧。

以下是一个很好的解决方法。 http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

- Glen Lipka

0

我相信所有的浏览器都支持PNG-8。虽然它不是alpha混合，但它确实具有透明背景。

- user1228

PNG-8 可以进行Alpha混合。你可能指的是Photoshop中的错误/限制。 - Kornel

0

我可能错了，但我非常确定IE6及更低版本无法在PNG文件中使用透明度。

有点是，也有点不是。

IE6本身不支持它们。

但是，IE支持疯狂的自定义JavaScript / CSS和COM对象（这就是他们最初实现XmlHttpRequest的方式）。

所有这些黑科技基本上都是这样做的：

- 查找所有png图像 - 使用DirectX图像过滤器加载它们并产生一种IE可以理解的透明图像格式 - 用过滤后的副本替换图像。

- Orion Edwards

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- porneL · Accepted Answer

IE PNG Fix 2.0支持background-position和-repeat！

此外，带有完全透明度的调色板8位PNG文件存在，与Photoshop和GIMP让你相信的相反，它们在IE6中降级效果更好 - 它只将透明度减少到1位。使用pngquant从24位PNG生成这样的文件。