Bagaimana untuk membetulkan imej latar belakang piksel pada penyemak imbas berasaskan Chromium?

Question

Pada penyemak imbas berasaskan Chromium, digunakan sebagai background-image 的缩小图像会被像素化，而在使用 <img> 标签显示时看起来会更加模糊。 有没有办法更改背景图像的渲染样式，使其看起来像标签中的显示？ 我尝试了 image-rendering 属性，但它似乎不适用于 background-image. Ia kelihatan baik di Firefox.

Contoh pemaparan pada

Berani, dengan tag background-image，右边是 <img> di sebelah kiri:

#backgroundImage, img {
  width: 80px;
  min-height: 80px;
  margin: 10px 5px;
  display: inline-block;
}

#backgroundImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("https://i.stack.imgur.com/X5EfB.png");
}

<div id="backgroundImage"></div>
<img src="https://i.stack.imgur.com/X5EfB.png" />

Answer 1

Ini nampaknya hanya mendapat hasil yang sama apabila memohon size:cover 和 position:center 规则时才会发生。通过将 object-fit 更改为 cover，您可以在 pada masa yang sama:

#backgroundImage, img {
  width: 80px;
  min-height: 80px;
  margin: 10px 5px;
  display: inline-block;
  object-fit: cover;
}

#backgroundImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("https://i.stack.imgur.com/X5EfB.png");
}