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/

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

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-positionfrom更改center center为0 0。所以它总是从左上角开始缩放，并且永远不会在侧面留下间隙（白线）。

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