如何修復基於 Chromium 的瀏覽器上的像素化​​背景圖像？

Question

在基於Chromium 的瀏覽器上，用作background-image 的縮小圖像會被像素化，而在使用<img> 標籤顯示時看起來會更加模糊。 有沒有辦法更改背景圖像的渲染樣式，使其看起來像標籤中的顯示？ 我嘗試了 image-rendering 屬性，但它似乎不適用於 background-image。它在 Firefox 上看起來不錯。

Brave 上的渲染範例，左邊是 background-image，右邊是 <img> 標籤：

#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

這似乎只在同時套用 size:cover 和 position:center 規則時才會發生。將 object-fit 變更為 cover#，您可以在 中獲得相同的結果：

#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");
}

#