Question

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

编辑

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

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

Answer 1

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

Answer 2

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

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

上展示

以下是他们网站的亮点：

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

Answer 3

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

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

Answer 4

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

Answer 5

我试图用.pngs创建一个网站，这是不值得的。网站变得缓慢，你使用不能100％工作的黑客。这是一个good article on some options，但我的建议是找到一种方法让GIF工作，直到你不必支持IE6。或者只是给IE6一个降级的体验。

Answer 6

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

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，但根据网站的不同，这可能并不重要。

（值得注意的是，第一张图片的网址是基于样式表的目录，其中第二张是基于正在浏览的页面的目录 - 因此它们不匹配的原因）

Answer 7

@Hboss

如果你确切地知道你将要显示的所有文件（以及每个文件的尺寸），这一切都很好和花花公子 - 保持CSS文件是一种皇家的痛苦，但我想它是有可能。当你想开始使用透明PNG用于一些非常常见的目的时：a）偶然的图形，如图标（可能是不同大小），可以在任何背景上工作，b）重复背景;然后你被搞砸了。我尝试过的每个解决方法在某些方面都遇到了绊脚石（当背景透明时无法选择文本，有时图像以古怪的尺寸显示等等），而且我已经发现为了获得最大的可靠性，我将不得不恢复为GIF。

我的建议是给PNG透明黑客一枪，但同时意识到它绝对不是完美的 - 只记得，对于一个超过7年的浏览器的用户，你正在倒退老即可。这些天我做的是给IE6用户首次访问该网站时提供弹出窗口，并提醒他们他们的浏览器已经过时并且不提供现代网站所需的功能，尽管我们会尽力而为给你最好的，如果你的血液升级，你将从我们的网站和整个互联网获得更好的体验。

Answer 8

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

Answer 9

我可能会弄错，但我很确定IE6而不是仅仅不用PNG文件的透明度。

你有点，而你却不是。

IE6本身并不支持他们。

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

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

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

Answer 10

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

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

Answer 11

如果您将图像从Fireworks导出为PNG-8，那么它们的行为与gif图像相同。因此，它们看起来不会显得邋and和灰色，透明度将是透明的，但它们不会像其他浏览器那样具有完全的24位可爱性。

可能无法完全解决您的问题，但至少您可以通过再次出口来解决问题。

Answer 12

我可能会弄错，但我很确定IE6而不是仅仅不用PNG文件的透明度。

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

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

12 个答案: