我有一个背景图片,我想填充我网站的整个背景。我用:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
图像为 2000 像素 x 2000 像素。问题是,当浏览器窗口大于 2000 像素时,您会看到白色背景。如果浏览器窗口比图像大,有没有办法让图像拉伸?
我有一个背景图片,我想填充我网站的整个背景。我用:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
图像为 2000 像素 x 2000 像素。问题是,当浏览器窗口大于 2000 像素时,您会看到白色背景。如果浏览器窗口比图像大,有没有办法让图像拉伸?
首先,如果您只是将其用作背景,请避免使用如此大的图像作为背景。你可以这样做,不要把所有东西都盖上。只需在样式标签中放这两个,你就会得到它。
background-image:url('your image');
background-size: cover;
如果图像扩展过多,可能会影响图像质量,但这是可行的。
尝试这个:
background-size: 100% auto;
background-size: cover;
似乎对我来说两种方式都有效 - 如果图像大于元素则缩小图像以填充,或者如果图像更小则拉伸图像以填充。这是一个小图像拉伸以填充较大 div 的示例:http: //jsfiddle.net/MRSallee/Q7STG/
我更喜欢使用这个:
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;