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

[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);
  }
}