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

时间:2008-08-13 19:09:24

标签: browser png transparency

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

编辑

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

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

12 个答案:

答案 0 :(得分:12)

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

答案 1 :(得分:5)

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

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

上展示

以下是他们网站的亮点:

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

答案 2 :(得分:5)

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

答案 3 :(得分:2)

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

答案 4 :(得分:2)

@Hboss

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

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

答案 5 :(得分:2)

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

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

答案 6 :(得分:2)

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

答案 7 :(得分:0)

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

答案 8 :(得分:0)

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

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

答案 9 :(得分:0)

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

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

答案 10 :(得分:0)

  

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

你有点,而你却不是。

IE6本身并不支持他们。

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

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

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

答案 11 :(得分:-1)

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

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