html背景的css代码生成器,使用一行CSS代码生成全屏背景图像

全屏背景图像是我们在制作网站时经常使用的效果。为了使背景图像具有响应式，即缩放浏览器时背景图像会随之放大缩小，通常我们会使用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浏览器没有效果)。