CSS background-size:在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.wovenplus.com/test/

只需比较Chrome和IE中的上述链接即可.在我的Chrome中,图像看起来模糊不清,在IE中看起来很清晰.(仔细观察叶子或顶部的融合,或在Chrome和IE窗口之间切换以查看差异).

有人也注意到了吗？对此有何解决方案？

Answer 1

尝试将此添加到代码中: image-rendering: -webkit-optimize-contrast; 对我而言,它完美地完成了这一操作.