如何让浏览器不支持PNG透明效果？

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

编辑下面

@mabwi & @syd - 不管是不是我同意使用PNG是不是重点。这是我需要解决的问题！ 0127.JS看起来很酷，但我不认为我想介绍一个应用程序的所有其他更改。我想要一个专门解决PNG问题的解决方案。感谢您的链接。

来源

2008-08-13 Ian Robinson

这是一个伟大的文章，解释和说明如何处理旧的浏览器PNG透明度：http://www.alistapart.com/stories/pngopacity/

来源

2008-08-13 19:14:48 SitWalkStand

该文章是相当过时，并使用非常蹩脚的浏览器检测。有比这更优雅的解决方案，例如http://www.twinhelix.com/css/iepngfix/ – Kornel 2009-01-26 14:04:48

-1

我可能会误解，但我非常确定IE6和更少只是不透明与PNG文件。

我有两个“解决方案”，我使用。要么创建带有透明度的GIF文件并将它们用于任何地方，要么将它们用于带有条件样式表的IE 6及更早版本。第二种方法只适用于将它们用作背景等。

来源

2008-08-13 19:12:49 MattBelanger

你错了 – 2009-11-17 05:50:37

使用CSS过滤器允许png透明度在IE 6中 – 2009-11-17 05:51:07

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

来源

2008-08-13 19:12:56

我尝试了很多解决方案，但是这个工作真的完成了！并且还有许多其他简洁的功能，因为它试图使Microsoft Internet Explorer的行为像一个符合标准的浏览器。它修复了许多HTML和CSS问题，并使IE6和IE6下的透明PNG工作正常。 – Kasper 2008-10-07 15:51:54

因此我推荐给大家！（抱歉的额外评论） – Kasper 2008-10-07 15:52:39

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

来源

2008-08-13 19:34:04 Will

PNG-8 *可以*进行alpha混合。您可能指的是Photoshop中的错误/限制。 – Kornel 2009-01-26 13:59:27

我发现什么看起来在这里很好的解决：Unit Interactive -> Labs -> Unit PNG Fix

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

下面是从他们的网站的亮点：

非常小巧的javascript：1kb以下！
修复IE过滤器属性导致的一些交互性问题。
适用于img对象和背景图像属性。
自动运行。您不必定义类或调用函数。
允许自动宽度和自动高度元素。
超级简单部署。

来源

2008-08-13 20:39:54

我可能会误解，但我很确定IE6和更少只是不透明与PNG文件。

你有点，你有点不是。

IE6本身没有支持他们。

然而，IE有疯狂的自定义JavaScript/CSS和COM对象（这是他们最初是如何实现的XmlHttpRequest）

所有这些黑客基本上做到这一点支持：

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

来源

2008-08-13 23:11:57

我搞砸了试图使用.pngs网站，它只是不值得。该网站变得缓慢，你使用的黑客不能100％工作。这里有一个good article on some options，但我的建议是找到一种方法来使GIF工作，直到你不必支持IE6。或者只是给IE6一个退化的体验。

来源

2008-08-13 23:31:12

在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，但根据该网站上，也可以不那么重要了。

（这是值得注意的是，第一个图像的URL是基于样式表，其中第二是基于网页的目录正在查看的目录 - 因此，他们为什么不匹配）

来源

2008-09-18 13:29:34 Hugoware

@ Hboss

如果你确切地知道所有要显示的文件（以及每个文件的维度），那么这些都很好，并且很花哨 - 维护该CSS文件将会是极大的痛苦，但我想它有可能。当你想开始使用透明的PNG来实现一些非常常见的目的时：a）偶发的图形，例如在任何背景下工作的图标（可能大小不一），以及b）重复背景;那么你被搞砸了。我试过的每种解决方法在某些时候都遇到了绊脚石（当背景透明时不能选择文本，有时图像以粗糙的尺寸显示等），我发现为了获得最大的可靠性我将不得不恢复为GIF。

我的建议是让PNG透明度破解一个镜头，但同时意识到它绝对不是完美的 - 只要记住，你向后弯曲了一个超过7年的浏览器的用户。我现在所做的是给IE6用户第一次访问该网站的一个弹出窗口，并提醒他们浏览器已过时，并且不提供现代网站所需的功能，尽管我们会尽力给你最好的，如果你血腥升级，你会从我们的网站和整个互联网获得更好的体验。

来源

2008-09-18 13:56:00 nickf