如何在基於 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規則時才會發生。 您可以在<img>中通過將其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"); }

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

因此，為了避免這種情況，您可以將background-size:cover規則替換為100% 100% ：

 #backgroundImage, img { width: 80px; min-height: 80px; margin: 10px 5px; display: inline-block; } #backgroundImage { background-repeat: no-repeat; background-position: center; background-size: 100% 100%; background-image: url("https://i.stack.imgur.com/X5EfB.png"); }

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