html - 背景图像上出现流氓白线

Question

html {
    height: 100%;
    overflow: hidden;
    background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

弟兄们好。我一直试图让这个可缩放的背景图像在这个网站上工作，但他妈的东西在左侧有一条奇怪的流氓白线。

http://jsfiddle.net/49n73/1/

使用 fiddle 来了解问题，确保将“结果”窗口拉得尽可能大，这样您才能真正看到流氓线。是什么原因造成的？

Answer 1

问题似乎是缩放错误加上 background-image 居中对齐。

可以通过更改来修复:

background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat center center fixed;

为此:

background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat 0 0 fixed;

因此，它所做的是将 background-position 从 center center 更改为 0 0。因此它将始终从左上角开始缩放，并且不会在侧面留下间隙(白线)。

现场演示:http://jsfiddle.net/49n73/11/embedded/result/