我在各种网站上使用一些半透明的 PNG 作为背景图像。这些通常类似于具有 30% 不透明白色层的 1x1 图像。
我注意到 Mobile Safari 无法正确显示它们，使它们呈现出较暗/灰色的色调。
这是一个 MobileSafari 错误（我无法想象），还是我需要对我的页面或 PNG 做一些不同的事情？
（以下是我创建 PNG 的方法：在 Photoshop 中，创建一个 1x1 透明画布。在图层 1 中绘制一个白色矩形。将不透明度设置为 30%，另存为具有透明度的 24 位 PNG。）
问问题
12918 次
3 回答
73
我试图使用具有部分透明度的 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 文件。
于 2010-04-19T04:45:25.697 回答
3
使用 1x1 以外的任何尺寸的图像。
（有事做的人的简答）
于 2012-02-17T15:18:07.033 回答
0
在两种设备（我的 Mac 和我的 iPod Touch）上查看网站后，我认为您在这里看到的是屏幕可以产生的颜色不同，而不是任一渲染引擎中的错误。造成这种差异的因素有很多，例如，便携式显示器的对比度可能没有那么大，以节省电力、使设备更便宜等。
于 2009-09-03T16:52:37.173 回答