响应式的全屏背景图片效果

[Benchland]

使用纯CSS实现的响应式全屏图片背景效果，相关代码如下：

body {
/* 图片地址 */
background-image: url(images/background-photo.jpg);

/* 图片水平垂直居中 */
background-position: center center;

/* 背景图不重复 */
background-repeat: no-repeat;

/* 图片在viewport中固定，以便即使内容大于图片，图片也不会移动 */
background-attachment: fixed;

/* 图片基于容器缩放 */
background-size: cover;

/* 图片加载中有一个背景色 */
background-color:#464646;

font-family: 'microsoft yahei',Arial,sans-serif;

/* 以上属性的缩放方式
* background: url(background-photo.jpg) center center cover no-repeat fixed;
*/
}

/* 移动设备相关的CSS */
@media only screen and (max-width: 767px) {
body {
/* 在移动互联情况下，使用更小的背景图片，以便更快的加载 */
background-image: url(images/background-photo-mobile-devices.jpg);
}
}