如何修复 Android 浏览器（移动网站）上的 PNG 图像条带？
对于一个移动网站项目，我遇到了一个问题（仅在 Android 浏览器上），透明度渐变（平滑的外发光）看起来不干净。相反，您可以看到它周围清晰的边缘。奇怪的是，只要我滚动页面，它似乎就会消失。
https://i.sstatic.net/qGmXj.png
该问题不会出现在任何桌面上浏览器或 iOS 设备上。
感谢您的帮助！
- 更新：
我发现这个问题称为 PNG Banding，仅在 16 位显示器上使用 PNG-24（24 位）时才会出现。由于质量损失，我无法使用 8 位图像（这会渲染得很好），所以我仍然没有找到问题的解决方案
For a mobile website project I encountered a problem that (only on android browser), the gradient to transparency (smooth outer glow) does not look clean. Instead you can see clear edges around it. Strangely though it seems to disappear for as long as I scroll the page.
https://i.sstatic.net/qGmXj.png
The problem does not occur on any Desktop Browser or on iOS Devices.
Thanks for your help!
- UPDATE:
I found out, that the problem is called PNG Banding and only occurs with PNG-24 (24 bit) on the 16bit displays. As I cannot go with an 8-Bit Image (which would render fine) because of the quality loss, I still did not find a solution for the problem
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我也没有找到解决这个问题的办法。
就我而言，我有一个带有白色到透明渐变的 PNG，我将其叠加在具有纯色背景颜色的元素顶部，以使它们在顶部“闪耀”。无论我尝试什么，Android 浏览器上总是会出现条带（并且根本没有其他浏览器）。
在我尝试 PNG 渐变之前，我尝试过使用 CSS3 来做到这一点，但遇到了同样的问题。
最后，我被迫创建不透明的 PNG，将白色到透明的渐变层与颜色层合并。这意味着我必须对每个可能的光泽/阴影进行相当于 Photoshop 的“硬编码”，无论它的颜色是什么。这不是最好的解决方案，但它在 Android 浏览器上显示良好，没有任何条带，我需要做一些事情，所以是的。 :|
I have also not found a solution to this problem.
In my case, I had a PNG with a white-to-transparent gradient that I would overlay on top of elements with solid background colours to give them a "shine" up top. No matter what I tried, there would always be banding on the Android browser (and no other browsers at all).
Before I even tried the PNG gradient, I tried doing so with CSS3, but that suffered from the same issue.
In the end, I was forced to create opaque PNGs with the white-to-transparent gradient layer merged with the colour layer. This meant I had to do the Photoshop equivalent of "hard-coding" each possible shine/shadow with whatever colour it would be on top of. Not the best solution, but it displays fine on Android browser without any banding and I needed do something, so yeah. :|
在 Photoshop 中，另存为 Web。选择 PNG-8 位。抖动选项：选择图案或噪声。这将使梯度带变得平滑。
In photoshop, Save For Web. Choose PNG-8 bit. Dither Option: choose pattern or noise. This will smooth out the gradient banding.