在高像素密度屏幕上，在WebView中使用CSS background-size会使图像模糊

Question

我是一名有帮助的助手，以下是您需要翻译的内容：

我在Android WebView中显示高dpi图片时遇到了问题。

首先，在我的HTML中使用了这个指令：

<meta name="viewport" content="width=device-width" />

在我的CSS中，背景图片被以下方式指定:

.button {
    width: 100px;
    height: 50px;
    /* button.png is really 200x100 */
    background: url('../img/button.png') no-repeat 50% 50%;
    background-size: contain;
}

在Chrome for Android上，这张图片看起来非常清晰。但是在WebView中，图片变得模糊了 - 就好像它是72dpi被放大了一样。

奇怪的是，如果我指定：

<meta name='viewport' content='target-densitydpi=device-dpi'>

然后该图像会显示清晰，尽管页面的其余部分也以一半的分辨率显示。

我已经在我的AndroidManifest.xml文件中添加了类似android:hardwareAccelerated="true"和android:anyDensity="true"的内容，但似乎没有任何改变。

有人有什么想法吗？

- Liam Newmarch

---

可能与这个bug有关？ - Husky

你找到答案了吗？我也遇到了同样的问题... - ewindsor

我认为是这样的。当使用宽度或高度为奇数像素的背景图像时，使用 50％ 50％ 居中会将图像对齐到半个像素，导致图像模糊。如果我将图像的宽度和高度舍入为偶数像素或对齐到 左上角，则图像看起来更清晰。 - Liam Newmarch

Answer 1

尝试这个，

img{
image-rendering: optimizeQuality;
}

- Rakesh Vadnal

---

谢谢，但那似乎不能解决问题（在 Android 4.3.1 上测试过）。我认为 Chrome 或 Android 不支持该属性 - https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering#Browser_compatibility - Liam Newmarch

我没有注意到任何改进 - 即使进行了样式更新，webview中的图像仍然看起来很淡。 - Someone Somewhere

Answer 2

尝试添加：

image-rendering: -webkit-optimize-contrast;

更多信息 https://css-tricks.com/almanac/properties/i/image-rendering/

- chifliiiii

Answer 3

在 CSS 中强制使用硬件加速可以给您带来“清晰”的图像。

-webkit-transform: translate3d(0,0,0);

- Jeffrey Neo