如何在基于 Chromium 的浏览器上修复像素化背景图像？-解网

问：

在基于 Chromium 的浏览器上，使用的缩小图像会像素化，而当使用标签显示时，它们看起来会更加模糊。有没有办法更改背景图像的渲染样式，使其看起来像标签中的显示？我尝试了图像渲染属性，但它似乎不起作用。它在Firefox上看起来不错。background-image<img>background-image

在 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" />

html css 图片 google-chrome chromium

#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:cover100% 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" />

谢谢你的回答，我没想到它可能来自其他属性。但是，就我而言，它并不能真正解决问题，因为它与图像不同，并且会改变图像的纵横比。我设法通过删除来获得不一致的渲染，它会在我重新加载时发生变化。改变大小和位置（我做不到）似乎会影响并有所不同......我希望我能找到一种每次都适用于每张图像的方法。background-size: 100% 100%;coverbackground-repeat.png.jpg

0赞 Kaiido 1/15/2023

@Arkellys我以为你想要和你的<img>一样的行为。是您的 <img> 当前申请的内容。background-size: 100% 100%;

0赞 Arkellys 1/15/2023

对不起，如果我的问题具有误导性。在我的问题上，我用一个小图像作为例子来说明问题。我想获得与 img 标签相同的显示质量，但我无法更改背景大小和位置属性。

0赞 Arkellys 1/15/2023

我还想指出，更改在 Electron 上不起作用，所以我想这也取决于浏览器/应用程序。background-size: 100% 100%;

0赞 Kaiido 1/15/2023

然后向 crbug.com 提出问题，以便他们改变自己的行为。如果你不能改变你所拥有的任何东西，我们能给你的就不多了。

上一个：在 Chrome/Firefox 中打印到 pdf 时，当锚标记的任何子项具有 position：absolute 时，HTML 链接会丢失

下一个：CSS Scroll Snap - 在悬停时进行转换的儿童会导致 Chromium 浏览器出现卡顿效果

如何在基于 Chromium 的浏览器上修复像素化背景图像？

How to fix pixelated background-image on Chromium-based browsers?

评论

评论