标签：
利用css中 background-size：cover 填充整个viewport
注意：
一张背景图像素5000px*5000px在pc端 缩放都基本满足要求 不会出现模糊失真；
但是在移动端使用如此大的图片完全是浪费资源，大图会导致加载变慢，尤其是在移动网络下。
在移动端可以另设一张相对小一点的图片使用媒体查询
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; }
@media only screen and (max-width: 767px) { body { background-image: url(images/background-photo-mobile-devices.jpg); } }
标签：
原文地址：http://www.cnblogs.com/wenb/p/5909239.html
