Pada penyemak imbas berasaskan Chromium, digunakan sebagai background-image 的缩小图像会被像素化，而在使用 <img> 标签显示时看起来会更加模糊。 有没有办法更改背景图像的渲染样式，使其看起来像标签中的显示？ 我尝试了 image-rendering 属性，但它似乎不适用于 background-image. Ia kelihatan baik di Firefox.
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" />
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini nampaknya hanya mendapat hasil yang sama apabila memohon
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"); }