如何解决Chromium系浏览器中background-image像素化问题？

让Chromium系浏览器中background-image的缩放效果与标签一致 #

在Chromium系浏览器（如Brave、Chrome）中，background-image和<img>标签的图像缩放算法默认存在差异：<img>会采用更平滑的Lanczos插值算法，而background-image默认使用的算法会让缩小后的图像出现像素化，这就是你看到的左右效果差异，Firefox则对两者使用了一致的处理逻辑。

你尝试的image-rendering属性对background-image的控制确实有限，不过可以通过以下方法解决：

方法1：使用Chromium特有的优化属性 #

添加-webkit-optimize-contrast这个私有属性，它会让background-image的缩放逻辑向<img>对齐，实现更平滑的效果：

#backgroundImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("https://i.sstatic.net/X5EfB.png");
  /* 添加这行 */
  image-rendering: -webkit-optimize-contrast;
}

方法2：用模糊滤镜模拟平滑效果 #

如果方法1效果不够理想，可以尝试用filter: blur()添加极轻微的模糊，抵消像素化的锐利感，调整模糊值来匹配<img>的显示：

#backgroundImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("https://i.sstatic.net/X5EfB.png");
  /* 调整模糊值，0.3-0.5px左右效果接近 */
  filter: blur(0.4px);
}

效果对比 #

内容的提问来源于stack exchange，提问作者Arkellys