手机上的模糊/像素化图像

Question

在我的phonegap应用程序中，我在列表视图中显示240x240图像，并将其大小调整为80x80。这很好用，图像很清晰：

然而，在我的应用程序的其他地方，我也希望显示这些图像。因为我想要显示更多它们，我使用的是精灵。仍然，精灵元素（精灵中的一个图像）是240x240并再次调整为80x80（使用background-size），但现在它看起来像这样：

如果我使用较小的尺寸（如120x120或80x80）并将其调整为80x80，则不会像素化，但会非常模糊。与描述的第一种情况的唯一区别是使用CSS精灵，但是很多人使用它们，我无法想象这是一个问题。有没有人知道可能导致这种情况的原因以及如何解决这个问题？

Answer 1

偶然我找到了问题的根源：z-index。

图像在div元素上绘制为背景图像，这些元素位于包裹div内。如果我给他们一个z-index以确保他们在顶部，他们会变得模糊。删除z-index会使它们完美呈现。

这实际上是Webkit引擎中的错误吗？

Answer 2

如果您正在使用Paint，请在使用paint实例之前确认以下内容：

paint.setAntiAlias(true);
paint.setDither(true);
paint.setFilterBitmap(true);

Answer 3

添加border-radius: 1%;为我修复此问题