css3背景总结与解析
一、常用基本属性：
- background-color：transparent || <color> 常用颜色格式有：颜色名、rgb、hls、十六进制、rgba、hlsa。
- background-image：none || <url> url可以是相对地址，可以是绝对地址。
- background-repeat：repeat || repeat-x || repeat-y || no-repeat。
- background-attachment：scroll || fixed。 默认值为scroll，表示图片随页面滚动。fixed表示页面固定，只能用于html或body标签上，使用在其它标签无效果。
- background-position：<percentage> || <length> ||[left | center | right] [,top | center | bottom] 。当使用百分比时，应当是总宽/高度减去图片宽/高度加上padding值的和的百分比。
二、css3背景相关新增属性：
- background-origin：padding-box || border-box || content-box。新版本浏览器语法。使用时需要加私有前缀。
padding-box：默认值。决定background-position的起始位置从padding的外边缘开始。
border-box：从border外边缘开始显示。
content-box：从padding的内边缘，即content的外边缘开始显示。 - background-clip：padding-box || border-box（默认值） || content-box。使用时需要加前缀
在css2.1至css3中，背景在整个盒模型中，它布满整个元素的盒子区域，只不过边框部分遮住了部分background。
当background-repeat为no-repeat时，background-color从边框的左上角起到边框的右下角止。而background-image却从padding的左上角到border的右下角。
当background-repeat为repeat时，background-color完全被background-image覆盖。而background-image从border的左上角到border的右下角。但是background-position的起点是从padding的边缘开始。
SP：在webkit内核下，background-clip还有一个text属性，配合webkit私有属性text-fill-color:transparent可以制作背景图片填充文字效果。 - background-size：auto || length || percentage（根据元素宽度计算） || cover || contain（保持图像高宽比）
在只取一个值的时候，第二个值相当于auto。
background-size：cover配合background-position：center常用来制作满屏背景效果。
三、css的background可以设置多背景，用逗号隔开。background-color只能设置一个。
