css - PNG 图像在针对 Retina 缩放 50% 时看起来很奇怪

Question

我有一个透明的 sprite PNG 图像 - 对于 Retina 屏幕，尺寸为 50%。
奇怪的是，我在常规显示器上显示的 PNG 图片上有那些小的白线瑕疵，这在 Chrome 中尤其明显。

这是一个截图(有点小，但希望你能看到):

放大到400%

Answer 1

Retina 屏幕在尺寸上并没有什么不同，它们的区别在于像素密度。因此，将图像缩小 50% 不会奏效。您需要改为分配 background-size: 50% 50%。

这将使您的浏览器渲染图像但缩小 50%。由于它们的大小实际上大于显示的大小，因此剩余的像素将根据屏幕的像素密度合并。

---

如果您仍然这样做并且问题仍然存在，则问题出在图像本身的质量。