css3背景

1. 5个基本属性

2. 新增属性

3. 多背景属性

1. 5个基本属性

• background-color(背景颜色，默认transparent透明)
• background-image(背景图片 scroll || fixed)
• background-repeat(背景图片展示方式)

background-repeat: repeat || repeat-x || repeat-y || no-repeat

• background-attachment(背景图片固定还是滚动)
• background-position(背景图片位置)

background-position:<百分比> || 长度 || [left | center | right] [top | center | right]

2. 新增属性

• background-origin: padding || border || content

默认情况下，背景图片的background-position属性总是以元素左上角为坐标原点对图片进行定位。padding：默认值，起始位置从padding的外边缘（border的内边缘）开始显示。
border: 从border的外边缘开始显示。
content：从content的外边缘（padding内边缘）开始显示。

• background-clip: border-box || padding-box || content-box

border-box: 默认值，背景图像从元素border区域向外裁剪，即元素边框之外的背景图片都被裁剪掉。
padding-box: 从padding区域向外裁剪。
content-box: 从 content 区域向外裁剪。

• background-size: auto || || || cover || contain

auto: 图片不作任何变化
百分比：相对元素尺寸而定
cover：背景图片整个放大填充元素
contain:背景图片保存本身比例缩放

3. 多背景属性

相邻背景之间必须使用逗号分隔开，具体语法如下：
background: [background-image] | [background-position] [/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],第二个背景

可以把缩写拆解：
background-image: url1,url2
background-repeat: repeat1, repeat2
background-position: position1, position2