如何让 PNG 透明度在本身不支持它的浏览器中工作？

Posted 2023-03-28

技术标签:

【中文标题】如何让 PNG 透明度在本身不支持它的浏览器中工作？【英文标题】：How to get PNG transparency working in browsers that don't natively support it? 【发布时间】：2010-09-05 19:57:27 【问题描述】：

我们（心爱的）设计师不断创建具有透明背景的 PNG 文件，以便在我们的应用程序中使用。我想确保 PNG 的此功能也适用于“旧”浏览器。最好的解决方案是什么？

下面的编辑

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

@Tim Sullivan - IE7.js 看起来很酷，但我不认为我想介绍应用程序的所有其他更改。我想要一个专门解决 PNG 问题的解决方案。感谢您的链接。

【问题讨论】：

【参考方案1】： IE PNG Fix 2.0 支持background-position 和-repeat！

还存在具有全 alpha 透明度的调色板 8 位 PNG，这与 Photoshop 和 GIMP 可能让您相信的相反，它们在 IE6 中的降级更好——它只是将透明度降低到 1 位。使用pngquant 从 24 位 PNG 生成此类文件。

【讨论】：

上述带有 Alpha 通道的 8 位 PNG 可以轻松地从 Fireworks 中导出。在“优化和对齐”面板中，选择“PNG 8”和“Alpha 透明度”。我在 Photoshop 中找不到这个功能（从 CS3 开始）。【参考方案2】：

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

更新单位 PNG 也出现在 list of PNG fix options on NETTUTS

以下是他们网站的亮点：

非常紧凑的 javascript：不到 1kb！修复了一些由 IE 的过滤器引起的交互问题属性。适用于 img 对象和背景图像属性。自动运行。您不必定义类或调用功能。允许使用自动宽度和自动高度元素。部署超级简单。

【讨论】：

【参考方案3】：

IE7.js 将在 IE6 中提供对 PNG（包括透明度）的支持。

【讨论】：

我尝试了很多解决方案，但这个真的成功了！并且具有许多其他简洁的功能，因为它试图使 Microsoft Internet Explorer 表现得像一个符合标准的浏览器。它修复了许多 html 和 CSS 问题，并使透明 PNG 在 IE5 和 IE6 下正常工作。所以推荐给大家！（对不起，多余的评论）【参考方案4】：

我在尝试使用 .pngs 制作网站时遇到了麻烦，但这不值得。网站变慢了，而且你使用了不能 100% 工作的黑客。这是good article on some options，但我的建议是找到一种方法使 gif 可以工作，直到您不必支持 IE6。或者只是给 IE6 一个降级的体验。

【讨论】：

【参考方案5】：

在 IE6 中使用 PNG 几乎不会比任何其他浏览器更难。您可以在没有 Javascript 的情况下在您的 CSS 中支持所有这些。我以前看过这个 hack...

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 是基于正在查看的页面的目录 - 因此它们不匹配）

【讨论】：

【参考方案6】：

@Hboss

如果您确切知道要显示的所有文件（以及每个文件的尺寸），那就太好了 - 维护那个 CSS 文件会很痛苦，但我想它会成为可能。当您想出于一些非常常见的目的开始使用透明 PNG 时：a) 附带的图形，例如适用于任何背景的图标（可能大小不同），以及 b) 重复背景；那你就完蛋了。我尝试过的每个解决方法都在某个时候遇到了障碍（当背景透明时无法选择文本，有时图像以古怪的尺寸显示，等等），我已经发现为了获得最大的可靠性，我将不得不恢复为 gif。

我的建议是尝试一下 PNG 透明度，但同时要意识到它绝对不是完美的 - 请记住，对于使用 7 年以上的浏览器的用户来说，你正在向后弯腰老。这些天我所做的是在 IE6 用户第一次访问该网站时弹出一个窗口，并友好地提醒他们的浏览器已经过时并且不提供现代网站所需的功能，尽管我们会尽力给您最好的，如果您升级得很好，您将从我们的网站和整个互联网获得更好的体验。

【讨论】：

2009 年到目前为止，我们的网站有 13% 的人使用 IE6。这个流量现在几乎完全来自 facebook - 所以大约 13% 的平均 facebook 用户使用 IE6。 sux，但这就是现实我维护的站点大约有 40% 的 IE7、32% 的 IE6 和 18% 的 Firefox。【参考方案7】：

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

【讨论】：

PNG-8 可以进行 alpha 混合。您可能指的是 Photoshop 中的错误/限制。【参考方案8】：