Alpha 透明 PNG 在 Mobile Safari 中无法正确显示
我在各个网站上使用一些半透明的 PNG 作为背景图像。这些通常类似于带有 30% 不透明白色层的 1x1 图像。
我注意到 Mobile Safari 无法正确显示它们，使它们呈现较暗/灰色的色调。
这是 MobileSafari 的 bug（我无法想象），还是我需要对我的页面或 PNG 做一些不同的事情？
（以下是我创建 PNG 的方法：在 Photoshop 中，创建一个 1x1 透明画布。在第 1 层中绘制一个白色矩形。将不透明度设置为 30%，另存为具有透明度的 24 位 PNG。）
I'm using some semi-transparent PNGs as background-images on various websites. These are usually something like a 1x1 image with a 30-percent opaque white layer.
I've noticed that Mobile Safari does not display them correctly, giving them a darker/grayish tint.
Is this a MobileSafari bug (I couldn't imagine so), or do I need to do something different, either to my pages or PNGs?
(Here's how I create the PNGs: In Photoshop, create a 1x1 transparent canvas. Draw a white rectangle in Layer 1. Set opacity to, say 30 percent, Save for Web as 24-bit PNG with transparency.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我试图使用具有部分透明度的 1 像素 PNG 来制作一些简单的 DIV 背景，为背景图片上方的某些文本制作半透明框。它在各种浏览器中看起来都很棒，直到我尝试了 iPhone。它正在做部分透明度，但是用你所说的奇怪的灰色阴影而不是预期的结果。
然后我尝试了那些链接的红色和蓝色测试。当我第一次查看它们时，它们看起来都很好，然后点击刷新导致它们变成灰色！我再次尝试使用新的浏览器窗口，它看起来又恢复正常了，啊，你提到的不一致再次出现了。好吧，然后我只是物理旋转 iPhone，当它从横向模式转到纵向模式时，颜色变成了灰色版本！
所有 W3C PNG 部分透明度测试在 iPhone 上看起来都很完美。然而，它确实未能通过伽玛测试。在排除了伽马射线的可能原因后，我花了几个小时寻找这个原因，但一无所获。我什至自己制作了一个从 0 到 100% 透明的渐变，以确保这不是我创建图像的过程。果然，效果非常好，所以我的过程很好。
然后我灵机一动，如果文件大于 1 像素怎么办？所以我将其设置为 2 像素宽、1 像素高、20% 透明度（alpha 为 80%）。嘭……成功了！我尝试了1x1、1x2、2x1、2x2、8x8的各种组合。除了单像素版本外，所有这些都工作正常。
我回去检查了上面链接的测试，发现它们对所有色调都使用 1 像素图像。啊哈！
现在您已经知道了，Mobile Safari 需要至少 2 个像素才能处理半透明 PNG 文件。
I was trying to do some simple DIV backgrounds using a 1 pixel PNG with partial transparency to make a translucent box for some text above a background picture. It looked great in all kinds of browsers, until I tried the iPhone. It was doing the partial transparency, but with this odd greyish shade you speak of instead of the expected results.
I then tried those linked red & blue tests. They both looked fine the first time I viewed them, then hitting refresh caused them to go greyish! I tried again with a new browser window and it was back to looking proper, ahh the inconsistency you mentioned strikes again. Well then I just phyiscally rotated the iPhone, and as it went from landscape to portrait mode the colors shifted to the greyish versions!
All the W3C PNG partial transparency tests looked perfect on the iPhone. It did, however, fail the Gamma test. After ruling out the gamma as a possible cause I hunted this one down for hours, but got nowhere. I even made a gradient of my own that went all the way from 0 to 100% transparent to make sure it wasn't my process of creating the image. Sure enough, that worked perfectly, so my process is good.
Then I had this stroke of genius, what if the file were larger than 1 pixel? So I made it 2 pixels wide, and 1 pixel high, 20% transparent (alpha of 80%). Bam..it worked! I tried all kinds of combinations of 1x1, 1x2, 2x1, 2x2, 8x8. All of them worked properly except for the single pixel version.
I went back and checked the above linked tests, and see that they use 1 pixel images for all the shades. Ah ha!
And there you have it, Mobile Safari needs at least 2 pixels to work with for semi-transparent PNG files.
使用 1x1 以外的任何尺寸的图像。
（为有事做的人简短回复）
Use an image with any dimensions other than 1x1.
(Abbreviated response for those who have stuff to do)
在两种设备（我的 Mac 和 iPod Touch）上查看网站后，我认为您在这里看到的是屏幕可以产生的颜色的差异，而不是任一渲染引擎中的错误。造成这种差异的因素有很多，例如，为了节省电量、使设备更便宜等，便携式显示器的对比度可能不会那么大。
After viewing the sites on both devices (my Mac and my iPod Touch), I think what you're seeing here is a difference in what colors the screens can produce rather than a bug in either rendering engine. There are many factors that can go into this kind of difference, e.g., the contrast in the portable display might not be as great in an effort to conserve power, make the device cheaper, etc.