CSS background 属性
background-color与 background设置背景颜色的区别
background-color设置的只是背景色，background设置的是整个背景。
当元素本身设置了background-image属性时，如果设置了background-color，图片不会被覆盖，background-color会在image底层；如果设置的是background，那么图片会被颜色给覆盖掉。
如下图所示，是分别设置了background-image和background-color的效果。如果设置的background: black，那么图片将会被black覆盖掉，但是图片仍然存在，只是被覆盖了而已。
background-attachment
定义background-image是否跟随容器的滚动而滚动。对background-color无效。
background-attachment = scroll | fixed | local
当background-attachment: fixed时，设置的background-image背景不随元素滚动而滚动。
background-position
定义background-image在容器内的位置。对background-color无效。
background-position = [ left | center | right | top | bottom | length-percentage ]
body { background-positon: right top } /* 100% 0% */
body { background-positon: top center } /* 50% 0% */
body { background-positon: center } /* 50% 50% */
body { background-positon: bottom } /* 50% 100% */
下图所示是background-positon: center的效果：
visibility: hidden与display: none对background-image的影响
background-image对应的是一张静态资源图片，当页面渲染前会请求这张图片资源回来进行渲染。
visibility: hidden，元素仍然存在DOM树中，只是不显示而已；display: none，元素不存在与DOM树中。
当元素visibility: hidden时，这张图片资源仍然会请求，但是不会显示出来；当元素设置display: none时，这张图片资源不会请求，也不会显示。还有一种场景：如果页面出现了滚动条，那么滚动条下面(即视图之外)的background-image静态资源会不会请求呢？答案是会的。只要是元素存在于DOM树上，不论显示还是隐藏，其依赖的banckground-image资源都将会请求回来。
从这里可以引发一些对资源请求性能的思考了。