CSS3 背景样式

1、background-origin:

background-origin: border-box | padding-box | content-box
参数分别表示：背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示

注意：如果背景图片不是no-repeat，这个属性无效，会从边框开始显示。

2、background-clip: 用来将背景图片做适当的剪裁以适应实际需要。

background-clip: border-box | padding-box | content-box | no-clip
参数分别表示从边框，或内填充，或内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果，background-clip默认值为border-box

3、background-size:设置背景图片的大小，以长度值或百分比显示，还可以通过从corver和contain来对图片进行伸缩。

background-size:auto | <长度值> | <百分比> | cover  |  contain

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

4、背景所有属性缩写：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

1、用逗号隔开每组 background 的缩写值；
2、如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
3、如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
4、background-color 只能设置一个。