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

How to get PNG transparency working in browsers that don't natively support it?

我们(挚爱的)设计师一直在创建具有透明背景的PNG文件，供我们的应用程序使用。我想确保PNG的此功能也可以在"旧"浏览器中使用。最好的解决方案是什么？

在下面的编辑

@mabwi

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

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

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

更新NETTUTS上的PNG修复选项列表中还包含单元PNG

这是他们网站上的亮点：

非常紧凑的javascript：不到1kb！适用于img对象和背景图像属性。
自动运行。您不必定义类或调用函数。
允许自动宽度和自动高度元素。
易于部署。

@Hboss

如果您完全知道要显示的所有文件(以及每个文件的尺寸)，那就很好而且很花哨-维护该CSS会很麻烦文件，但我想这是有可能的。当您出于某些非常常见的目的而开始使用透明PNG时：a)偶然的图形，例如在任何背景上均可工作的图标(可能大小不同)，以及b)重复背景；然后你就被搞砸了。我尝试过的每种解决方法都在某个时候碰到了绊脚石(背景透明时无法选择文本，有时图像会以古怪的大小显示，等等)，并且我发现为了获得最大的可靠性，

我的建议是给PNG透明性技巧一个镜头，但同时要意识到它绝对不是完美的-而且请记住，对于超过7年的浏览器。这些天，我的工作是让IE6用户在首次访问该网站时弹出一个窗口，并友好地提醒他们，其浏览器已过时并且不提供现代网站所需的功能，尽管我们会尽力做到为您提供最好的服务，如果您对BLOODY WELL UPGRADED感到满意，就会从我们的网站和整个互联网中获得更好的体验。

在IE6中使用PNG几乎比其他任何浏览器都困难。您可以在没有Javascript的CSS中支持所有功能。我以前见过这种骇客...

1
2
3
4
5
6
7
8
9
10

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

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

我不太确定这是不是有效的CSS，但是根据站点的不同，可能关系不大。

(值得注意的是，第一个图像的URL是基于样式表的目录的，第二个图像是基于正在查看的页面的目录的-因此为什么它们不匹配)

我想尝试用.webps创建一个网站很麻烦，但这是不值得的。该网站变慢，并且您使用无法100％使用的黑客程序。这是一篇有关某些选项的好文章，但是我的建议是找到一种使gif正常工作的方法，直到不必支持IE6为止。或者只是给IE6降级的体验。

IE7.js将为IE6中的PNG(包括透明性)提供支持。

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

可能无法完全解决您的问题，但至少可以将其中的一部分重新导出。

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

这是处理此问题的好方法。http：//commadot.com/png-8-that-acts-like-png-24-without-烟花/