我经常有这种感觉，将图像设置为背景大小：封面（在div上）在Google Chrome中看起来并不清晰。
这是我使用的CSS。
.parent:hover
{
background-color: #FFCC00;
}
.parent:hover > .child
{
background-color: #FFCC00;
color: #FFFFFF;
}
在此处查看实时示例：http://www.wovenplus.com/test/
只需比较Chrome和IE中的上述链接即可。在我的Chrome中，图像看起来模糊不清，在IE中看起来很清晰。 （仔细观察叶子或顶部的融合，或在Chrome和IE窗口之间切换以查看差异）。
有人也注意到了这一点吗？对此有何解决方案？
答案 0 :(得分：20)
尝试将此添加到代码中：
image-rendering: -webkit-optimize-contrast;
对我来说，它完美地完成了这个技巧。
答案 1 :(得分：0)
我认为这是因为像素除以二，四，八......等等。因此，为了获得最佳图像质量，请尝试使您的高度等于原始高度/ 2或4 ......等。
答案 2 :(得分：0)
如果使用某些CMS系统（例如wordpress druple或任何媒体管理或优化工具）来使时间图像无法加载原始版本，或者该版本可能是优化或压缩图像版本
我不认为在浏览器上它在编码方面是我的问题
shopify code snippet
<section class="img" style="background:url({{image | img_url: 'master' }}) no-repeat center;>