Chrome 中的 CSS 背景图像在调整大小时会像素化

Question

我意识到 Chrome 渲染 CSS 背景图像的方式与

<img />

不同。

两张相同的图像调整为相同尺寸

• 第一个CSS背景图像是像素化的
• 第二个带有

  <img />

  的是抗锯齿。

<style>
  .a {
    width: 292px;
    height: 233.594px;
    display: inline-block;
  }

  div.a {
    background-image: url("data:image/png;...");
    background-size: cover;
  }
</style>


<div class="a"></div>
<img class="a" src="data:image/png;..." />

游乐场：https://jsfiddle.net/tjpn9ecu/3/

是否可以强制 Chrome 也为 CSS 背景图像启用抗锯齿功能？

Answer 1

尝试使用百分比背景大小，例如 100%；

background-size: 100%;

https://jsfiddle.net/fxau24zo/1/

Answer 2

任何非零 Z 平移都将有效地添加抗锯齿并改善外观：

div.a {
  background-image: url("data:image/png;...");
  background-size: cover;
  transform: translateZ(1px);  /* Add this */
}