移动版Safari中，Alpha透明度PNG图片无法正确显示。

Question

我在多个网站上使用一些半透明PNG图片作为背景图像。这些通常是一个1x1的图像，带有30%不透明的白色层。

我注意到移动版Safari不能正确地显示它们，给它们一个更暗/灰色的色调。

这是MobileSafari的bug吗（我无法想象），还是我需要对我的页面或PNG图片做出不同的处理？

（以下是我创建PNG文件的步骤：在Photoshop中创建一个1x1的透明画布。在第一层中绘制一个白色矩形。将不透明度设置为30％，使用“另存为Web”保存为带有透明度的24位PNG格式。)

- worksology

---

我注意到这并不是100％一致的。在一次加载中，我看到它完美地呈现出来，直到80％的线（在该点以下为深灰色）。当我刷新时，问题出现在整个页面上（随后的重新加载也显示为损坏）。我认为这可能是我的iPhone或其软件特有的错误。我将尝试重新启动，如果失败，将重新安装所有软件（如果还是失败，就换一部新手机：））。 - worksology

关闭并归为“过于局限”？真是滑稽。这通常适用，并且在三年后，对于iOS 6移动Safari仍然百分之百相关。 - G-Wiz

@gWiz 你说得对。我今天来到这里，它完美地解决了我的问题。奇怪的是，这种情况大多发生在透明的白色图像上。 - insertusernamehere

Answer 1

我试着用一个带有部分透明度的1像素PNG图像来制作一些简单的DIV背景，以便在背景图片上方放置一些文本。在各种浏览器中看起来很棒，直到我尝试使用iPhone。它正在执行部分透明性，但是使用了你所说的奇怪灰色而不是预期结果。

然后我尝试了那些链接的红色和蓝色测试。第一次查看它们时，它们都看起来不错，然后再次刷新会使它们变灰！我在新的浏览器窗口中再次尝试，它又回到了正确的外观，啊，你提到的不一致性再次袭来。然后我只是转动了一下iPhone，当它从横向模式转换为纵向模式时，颜色就会变成灰色版本！

所有W3C PNG部分透明度测试在iPhone上看起来完美。然而，它未能通过Gamma测试。在排除gamma可能是问题原因之后，我花了几个小时寻找解决方法，但没有进展。我甚至自己制作了一个渐变，从0到100％透明，以确保不是我创建图像的过程出现问题。果然，那行得通，所以我的过程没问题。

然后我有了这个天才的想法，如果文件大于1像素怎么办？因此，我将其制成2像素宽，1像素高，20％透明度（80％的alpha）。嘭...它奏效了！我尝试了各种组合，1x1、1x2、2x1、2x2、8x8。所有这些都正常工作，除了单像素版本。

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

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

- Dr. Cheap

Answer 2

请使用任何尺寸的图像，除了1x1。

(对于那些有事情要做的人的简短回答)

- Matt

Answer 3

在查看了我的Mac和iPod Touch上的网站后，我认为你所看到的是屏幕可以产生的颜色不同，而不是任何渲染引擎中的错误。有许多因素可能导致这种差异，例如，便携式显示器的对比度可能不如其他设备，以节省电力、降低成本等。

- fbrereto