Alpha 透明 PNG 在 Mobile Safari 中无法正确显示答案

【问题标题】：Alpha transparent PNGs not displaying correctly in Mobile SafariAlpha 透明 PNG 在 Mobile Safari 中无法正确显示
【发布时间】：2010-11-25 08:49:20
【问题描述】：

我在各种网站上使用一些半透明的 PNG 作为背景图像。这些通常类似于具有 30% 不透明白色层的 1x1 图像。

我注意到 Mobile Safari 无法正确显示它们，使它们呈现出较暗/灰色的色调。

这是一个 MobileSafari 错误（我无法想象），还是我需要对我的页面或 PNG 做一些不同的事情？

（以下是我创建 PNG 的方法：在 Photoshop 中，创建一个 1x1 透明画布。在第 1 层绘制一个白色矩形。将不透明度设置为 30%，另存为具有透明度的 24 位 PNG。）

【问题讨论】：

我注意到这不是 100% 一致的。在一次加载时，我已经看到它完美地渲染到了 80% 的线（那里有一个直接穿过 80 行的中断，该点下方是深灰色）。当我刷新时，问题出在整个页面上（随后的重新加载也显示它已损坏）。我认为这可能是我的 iPhone 特有的错误，或者是它的软件。我会尝试重新启动，失败了，重新安装所有软件（失败了，得到一部新手机:)）。
因过于本地化而关闭？好笑。这是普遍适用的，而且 3 年多之后，仍然 100% 与 iOS 6 Mobile Safari 相关。
@gWiz 你是对的。我今天来到这里，它完全符合我的问题。奇怪的是，这主要发生在白色的透明图像上。

标签： iphone png transparency mobile-safari

【解决方案1】：

我试图使用具有部分透明度的 1 像素 PNG 来制作一些简单的 DIV 背景，以便为背景图片上方的某些文本制作一个半透明框。在我尝试 iPhone 之前，它在各种浏览器中看起来都很棒。它正在做部分透明，但是你所说的这种奇怪的灰色阴影而不是预期的结果。

然后我尝试了那些链接的红色和蓝色测试。我第一次查看它们时它们看起来都很好，然后点击刷新导致它们变灰！我用新的浏览器窗口再次尝试，它又恢复了正常，啊，你提到的不一致再次出现。好吧，我只是物理旋转了 iPhone，当它从横向模式变为纵向模式时，颜色变成了灰色版本！

所有 W3C PNG 部分透明度测试在 iPhone 上看起来都很完美。然而，它确实没有通过 Gamma 测试。在排除了伽马可能的原因后，我花了几个小时追捕这个，但一无所获。我什至制作了自己的渐变，从 0 到 100% 透明，以确保这不是我创建图像的过程。果然，效果很好，所以我的过程很好。

然后我有这个天才，如果文件大于 1 像素怎么办？所以我让它宽 2 像素，高 1 像素，透明 20%（alpha 为 80%）。 Bam..它奏效了！我尝试了 1x1、1x2、2x1、2x2、8x8 的各种组合。除了单像素版本之外，所有这些都正常工作。

我回去检查了上面链接的测试，发现它们对所有阴影都使用了 1 像素的图像。啊哈！

就是这样，Mobile Safari 至少需要 2 个像素才能处理半透明的 PNG 文件。

【讨论】：

【解决方案2】：

使用尺寸不是 1x1 的图片。

（有事做的人的简答）

【讨论】：

【解决方案3】：

在两种设备（我的 Mac 和我的 iPod Touch）上查看网站后，我认为您在此处看到的是屏幕可以产生的颜色不同，而不是任一渲染引擎中的错误。造成这种差异的因素有很多，例如，为了节省电力、使设备更便宜等，便携式显示器的对比度可能没有那么大。

【讨论】：