Chromium 기반 브라우저에서 픽셀화된 배경 이미지를 수정하는 방법은 무엇입니까?

Question

Chromium 기반 브라우저에서는 background-image 的缩小图像会被像素化，而在使用 <img> 标签显示时看起来会更加模糊。 有没有办法更改背景图像的渲染样式，使其看起来像标签中的显示？ 我尝试了 image-rendering 属性，但它似乎不适用于 background-image로 사용됩니다. Firefox에서는 괜찮아 보입니다.

Brave의 렌더링 예(왼쪽에 background-image，右边是 <img> 태그 포함):

으아아아 으아아아

Answer 1

이것은 size:cover 和 position:center 规则时才会发生。通过将 object-fit 更改为 cover，您可以在 동시에 신청할 때만 동일한 결과를 얻는 것 같습니다:

으아아아 으아아아