CSS 背景大小：Chrome 中的封面变得模糊且暗淡

Question

我经常有这样的感觉：设置为背景大小的图像：封面（在 div 上）在 Google Chrome 中看起来不清晰。

这是我使用的CSS。

.slide {
    width:1280px;
    height:400px;
    background-image:url(background.jpg);
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
    background-position:center center;
    background-repeat:no-repeat;    
}

在此处查看实例：http://www.wedplus.com/test/

只需在 Chrome 和 IE 中比较上面的链接即可。就我而言，在 Chrome 中，图像看起来模糊且暗淡，而在 IE 中，图像看起来锐利而脆。 （仔细观察叶子或垫子顶部，或在 Chrome 和 IE 窗口之间切换以查看差异）。

有人也注意到这一点吗？有什么解决办法吗？

Answer 1

尝试将其添加到代码中：

image-rendering: -webkit-optimize-contrast;

对我来说，它完美地完成了任务。

Answer 2

我认为这是因为像素除以二、四、八等。因此，为了获得最佳图像质量，请尝试使您的高度等于原始高度/2或4...等。

Answer 3

如果使用一些CMS系统，如wordpress druple或任何媒体管理或优化工具，则图像无法加载原始版本，或者可能是优化或压缩图像的版本

我不认为浏览器编码方面有问题，我的

 shopify code snippet

<section class="img" style="background:url({{image  | img_url: 'master' }}) no-repeat center;>

1. 在 worpdress 默认图像尺寸上，您会看到很小。 mediam、大等您可以在管理端设置图像像素大小。这个概念所有类型的CMS您都必须在我们的CMS上检查

Answer 4

在 webflow 上，可以通过在图像设置中选择“禁用响应性”来解决此问题。