我试图使用具有部分透明度的 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 文件。