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

StackOverflow https://stackoverflow.com/questions/10243

  •  08-06-2019
  •  | 
  •  

题

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

编辑如下

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

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

有帮助吗？

解决方案

这是一篇很棒的文章，解释并展示了如何在旧版浏览器中处理 PNG 透明度： http://www.alistapart.com/stories/pngopacity/

其他提示

我在这里找到了一个非常好的解决方案： 单元互动 -> 实验室 -> 单元 PNG 修复

更新 单位 PNG 也出现在 NETTUTS 上的 PNG 修复选项列表

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

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

还用调色板 8 位 PNG 完全阿尔法透明度 存在，与 Photoshop 和 GIMP 可能让您相信的相反，它们在 IE6 中降级得更好 – 它只是将透明度降低到 1 位。使用 庞克量化 从 24 位 PNG 生成此类文件。

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

我曾尝试用 .pngs 制作一个网站，但这是不值得的。网站变得很慢，而且你使用的 hack 也不能 100% 有效。这是一个 关于一些选项的好文章, ，但我的建议是找到一种方法让 gif 发挥作用，直到您不必支持 IE6。或者干脆给IE6降级体验。

在 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

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

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

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

我可能是错的，但我很确定 IE6 和 less 只是不会对 PNG 文件进行透明度处理。

你有点是，又有点不是。

IE6 本身不支持它们。

然而，IE 支持疯狂的自定义 javascript/css 和 COM 对象（这就是它们最初实现 XmlHttpRequest 的方式）

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

  • 查找所有png图像
  • 使用 directx 图像过滤器加载它们并以 IE 可以理解的某种格式生成透明图像
  • 将图像替换为过滤后的副本。

需要考虑的一件事是电子邮件客户端。您通常需要 PNG-24 透明度，但在 Outlook 2003 和使用 IE6 的计算机中。电子邮件客户端不允许 CSS 或 JS 技巧。

这是处理这个问题的好方法。http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

如果您从 Fireworks 将图像导出为 PNG-8，那么它们的作用与 gif 图像相同。所以它们不会看起来又糟糕又灰暗，透明度就是透明，但它们不会像其他浏览器那样拥有完整的 24 位可爱性。

可能无法完全解决您的问题，但至少您可以通过重新导出它们来解决问题。

我可能是错的，但我很确定 IE6 和 less 只是不会对 PNG 文件进行透明度处理。

我有两个使用的“解决方案”。创建具有透明度的 GIF 文件并在任何地方使用它们，或者仅将它们用于带有条件样式表的 IE 6 及更早版本。第二个实际上仅在您将它们用作背景等时才有效。

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