如何修复Android浏览器（移动网站）上的PNG图像条带？

Question

对于移动网站项目，我遇到了一个问题（仅在Android浏览器上），渐变到透明（光滑的外部发光）看起来并不干净。相反，你可以看到它周围的清晰边缘。奇怪的是，只要我滚动页面，它似乎就会消失。

http://i.stack.imgur.com/qGmXj.png

在任何桌面浏览器或iOS设备上都不会出现此问题。

感谢您的帮助！

• 的更新：
  我发现，这个问题被称为PNG Banding，并且仅在16位显示器上使用PNG-24（24位）。由于质量损失，我无法使用8位图像（可以渲染得很好），但我仍然没有找到问题的解决方案

Answer 1

我也没有找到解决这个问题的方法。

在我的情况下，我有一个带有白色到透明渐变的PNG，我将覆盖在具有纯色背景颜色的元素上，使它们在顶部呈现“光泽”。无论我尝试什么，Android浏览器上总会有条带（根本没有其他浏览器）。

在我尝试使用PNG渐变之前，我尝试使用CSS3，但是遇到了同样的问题。

最后，我被迫创建不透明的PNG，其中白色到透明的渐变层与颜色层合并。这意味着我不得不使用相当于“硬编码”每个可能的光泽/阴影的Photoshop，无论它在上面的颜色是什么。不是最好的解决方案，但它在Android浏览器上显示正常，没有任何条带，我需要做某事，所以是的。 ：|

Answer 2

In photoshop, Save For Web. Choose PNG-8 bit. Dither Option: choose pattern or noise. This will smooth out the gradient banding.