代码之家  ›  专栏  ›  技术社区  ›  Ian Robinson

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

  •  12
  • Ian Robinson  · 技术社区  · 16 年前

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

    下面编辑

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

    @TimSullivan-ie7.js看起来很酷,但我不想介绍应用程序的所有其他更改。我想要一个专门解决PNG问题的解决方案。谢谢你的链接。

    12 回复  |  直到 12 年前
        1
  •  12
  •   SitWalkStand    16 年前

    下面是一篇很好的文章,解释并演示了如何在旧浏览器中处理PNG透明性: http://www.alistapart.com/stories/pngopacity/

        2
  •  5
  •   Ian Robinson    16 年前

    我发现了一个很好的解决方案: Unit Interactive -> Labs -> Unit PNG Fix

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

    以下是他们网站的亮点:

    • 非常紧凑的javascript:低于1KB!
    • 修复了IES筛选器导致的一些交互问题 属性。
    • 处理img对象和背景图像属性。
    • 自动运行。你不必定义类或调用 功能。
    • 允许自动宽度和自动高度元素。
    • 部署非常简单。
        3
  •  5
  •   Kornel    13 年前

    还将8位PNG与 全透明度 存在,与photoshop和gimp可能让你相信的相反,它们在ie6中降解得更好,它只是将透明度降低到1位。使用 pngquant 从24位PNG生成这样的文件。

        4
  •  2
  •   Tim Sullivan    16 年前

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

        5
  •  2
  •   Lance Fisher    16 年前

    我试着用.pngs创建一个网站,但这不值得。网站速度变慢了,你使用的黑客不工作100%。这里有一个 good article on some options 但是我的建议是找到一种方法让gif发挥作用,直到你不需要支持ie6。或者给IE6一个降级的体验。

        6
  •  2
  •   hugoware    16 年前

    在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是基于样式表的目录,第二个是基于正在查看的页面的目录,因此它们不匹配)

        7
  •  2
  •   nickf    16 年前

    @ Hboss

    如果你完全知道你将要显示的所有文件(以及每个文件的尺寸),那就太好了,太好了。维护这个CSS文件是一件很痛苦的事,但我认为这是可能的。当你想开始使用透明PNG来达到一些非常常见的目的时:a)一些附带的图形,例如在任何背景下都能工作的图标(可能大小不同),b)重复背景;然后你就完蛋了。我尝试过的每一个解决方法都在某一点上遇到了障碍(当背景是透明的时无法选择文本, 有时 图像显示在古怪的大小等),我发现,为了最大的可靠性,我将不得不恢复到gifs。

    我的建议是给PNG透明黑客一个机会,但同时也要意识到它绝对不是完美的——记住,你是在为使用 7岁以上的浏览器 . 这些天我要做的是在IE6用户第一次访问该网站时弹出一个弹出窗口,友好地提醒他们,他们的浏览器已经过时,没有提供现代网站所需的功能,尽管我们会尽力为您提供最好的服务,但如果您升级得很好,您将从我们的网站和整个互联网获得更好的体验。d.

        8
  •  0
  •   Will    16 年前

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

        9
  •  0
  •   Orion Edwards    16 年前

    我可能搞错了,但我很肯定IE6和更少只是不能对PNG文件进行透明处理。

    你有点是,你也有点不是。

    IE6本就没有对它们的支持。

    但是,IE支持疯狂定制的javascript/css和com对象(这是它们最初实现xmlhttpRequest的方式)

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

    • 查找所有PNG图像
    • 使用DirectX图像过滤器加载它们,并以IE理解的某种格式生成透明图像。
    • 用过滤后的副本替换图像。
        10
  •  0
  •   Glen Lipka    16 年前

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

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

        11
  •  0
  •   Tom    16 年前

    如果您从烟花中导出PNG-8图像,那么它们的作用将与GIF图像相同。因此,它们看起来不会像垃圾和灰色,透明将是透明的,但它们不会像其他浏览器那样拥有完整的24位可爱。

    可能并不能完全解决你的问题,但至少你可以部分地重新导出它们。

        12
  •  -1
  •   MattBelanger    16 年前

    我可能搞错了,但我很肯定IE6和更少只是不能对PNG文件进行透明处理。

    我有两个我使用的“解决方案”。要么创建透明的GIF文件,在任何地方都使用这些文件,要么将其用于IE 6及更高版本的有条件样式表。第二种方法只适用于将它们用作背景等的情况。