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-position从center center更改为0 0。因此它将始终从左上角缩放，并且不会在侧面留下间隙（白线）。

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

出现在背景图象的凶恶白线

1 个答案: