Question

我有一个背景图片，我想填写我网站的整个背景。我用：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

图像为2000px x 2000px。问题是，当浏览器窗口大于2000px时，您可以看到白色背景。如果浏览器窗口大于图像，有没有办法让图像拉伸？

Answer 1

首先，如果您只是将它用作背景，请首先避免使用如此大的图像。你可以像这样做，不要把所有内容都覆盖。只有在样式标签中放置这两个，你就可以得到它。

background-image:url('your image');
background-size: cover;

如果图片质量过度膨胀，可能会受到干扰，但这样做有效。

Answer 2

试试这个：

background-size: 100% auto;

Answer 3

background-size: cover;似乎对我两种方式都有效 - 如果图像大于元素则缩小图像，或者如果图像较小则拉伸图像以填充图像。这是一个小图片拉伸以填充更大div的示例：http://jsfiddle.net/MRSallee/Q7STG/

Answer 4

我更喜欢使用它：

background: url(../img/url.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;

填充窗口的背景图片？

4 个答案: