使用一行CSS代码生成全屏背景图像

查看演示 下载demo

全屏背景图像是我们在制作网站时经常使用的效果。为了使背景图像具有响应式，即缩放浏览器时背景图像会随之放大缩小，通常我们会使用jQuery来制作这种效果。

但是如果你放弃IE8及以下的IE浏览器，你可以仅仅使用一句CSS代码就可以完成这种效果。下面我们来看看如何制作。

background-size属性

通过background-size属性，你可以告诉浏览器一个元素的背景图像有多大。

#elem{
    background:url('demo.jpg') center center no-repeat;
    background-size:100px 150px;
}
                            

更为神奇的是，这个属性支持两个非常好用的值：contain 和cover。

• Contain ：调整背景图像的大小，使它完全适合元素的大小。
• Cover ：这个值使元素的背景完全被图像覆盖。图像会调整到一个刚好适合元素的尺寸，可以看下面的图片比较一下两种效果。我们将使用Cover属性来制作全屏背景图像。

我们需要做的，是为html元素设置我们想要作为背景图像的图片。

html{
    /* This image will be displayed fullscreen */
    background:url('background.jpg') no-repeat center center;

    /* Ensure the html element always takes up the full height of the browser window */
    min-height:100%;

    /* The Magic */
    background-size:cover;
}
body{
    /* Workaround for some mobile browsers */
    min-height:100%;
}                               
                            

现在，你拥有了一个全屏显示的背景图像效果。当你改变浏览器的大小或在移动设备的小屏幕上查看这个页面时，背景图像的大小也会随之改变。这些属性可以在所有现代浏览器上正常工作（IE8级以下的IE浏览器没有效果）。

查看演示 下载demo