17

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

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

这是一个 MobileSafari 错误(我无法想象),还是我需要对我的页面或 PNG 做一些不同的事情?

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

4

3 回答 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 回答