Alpha透明PNG在Mobile Safari中无法正确显示 [英] Alpha transparent PNGs not displaying correctly in Mobile Safari

问题描述

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

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.

我注意到Mobile Safari无法正确显示它们，使它们更暗/灰色色调。

I've noticed that Mobile Safari does not display them correctly, giving them a darker/grayish tint.

这是一个MobileSafari错误（我无法想象），还是我需要对我的页面或PNG做一些不同的事情？

Is this a MobileSafari bug (I couldn't imagine so), or do I need to do something different, either to my pages or PNGs?

（以下是我创建PNG的方法：在Photoshop中，创建一个1x1透明画布。在第1层中绘制一个白色矩形。将不透明度设置为30％，另存为Web具有透明度的24位PNG。）

(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.)

推荐答案

我试图使用具有部分透明度的1像素PNG来做一些简单的DIV背景为背景图片上方的某些文字制作半透明框。在我试用iPhone之前，它在各种浏览器中看起来都很棒。它正在做部分透明度，但是你会说这个奇怪的灰色阴影而不是预期的结果。

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.

然后我尝试了那些链接的红色&蓝色测试。他们第一次看到它们时看起来都很好看，然后点击刷新使它们变得灰暗！我再次尝试使用新的浏览器窗口，它又恢复正常，啊，你提到的不一致性再次发生。那么我只是在物理上旋转了iPhone，当它从横向模式变为纵向模式时，颜色变为灰色版本！

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!

所有W3C PNG部分透明度测试看起来都很完美在iPhone上。然而，它确实没有通过Gamma测试。在排除伽玛作为一个可能的原因之后，我将这个狩猎了几个小时，但无处可去。我甚至做了一个自己的渐变，从0到100％透明，以确保它不是我创建图像的过程。果然，这完全有效，所以我的过程很好。

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.

然后我有这个天才，如果文件大于1像素怎么办？所以我做了2像素宽，1像素高，20％透明（alpha为80％）。 Bam ..工作！我尝试了1x1,1x2,2x1,2x2,8x8的各种组合。除了单像素版本之外，所有这些都正常工作。

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.

我回去检查上面的链接测试，并看到他们使用1像素图像的所有阴影。啊哈！

I went back and checked the above linked tests, and see that they use 1 pixel images for all the shades. Ah ha!

你有它， Mobile Safari需要至少2个像素来处理半透明的PNG文件。

这篇关于Alpha透明PNG在Mobile Safari中无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！