CSS3 Background

CSS3中给Background新追加的属性：《CSS3 Background-size》、《CSS3 Background-clip》和《CSS3 Background-origin》

CSS2中的Background属性：

background: background-color || background-image || background-repeat || background-attachment || background-position;
/*也可以分解写成：*/
background-color: color值 || RGBA值；
background-image: url();
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-position: <length> || <per>

CSS3中的Background属性

background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color
也可以分解写成：
background-image: url();
background-position: <length> || <per>
background-size: <length> || <per>
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-clip: padding-box || border-box || content-box;
background-origin: padding-box || border-box || content-box;
background-color: color值 || RGBA值；

特别需要注意：

如果使用联写方式时，background-size需跟在background-position的后面，并用“/”隔着，即”background-position/background-size”。另外本人强烈建议CSS3中的Background属性不要全部联写，最好把CSS3中的属性拆分出来单独书写，因为他们在不同浏览器下需要加上自己的前缀，如：

background: background-color || background-image || background-repeat || background-attachment || background-position;background-size: <length> || <per>background-clip: padding-box || border-box || content-box;background-origin: padding-box || border-box || content-box;

后面三个最好在运用时按前面介绍的，把各自的私有前缀加上。

一、CSS3的多背景

语法：

background ： [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],*
也可以分解成：
background-image: url1,url2,...,urlN;
background-repeat: repeat1,repeat2,...,repeatN;
background-position: position1,position2,...,positionN;
background-size: size1,size2,...,sizeN;
backrgound-attachment: attachment1,attachment2,...,attachmentN;
background-clip: clip1,clip2,...,clipN;
background-origin: origin1,origin2,...,originN;
background-color: color;

取值说明：

1、background-image:此值用来设置元素的背景图片，可以使用相对地址或绝对地址索引背景图片，详细参考w3c的Background-image；

2、background-repeat:此值用来设置元素的背景图片的平铺方式，其默认值为repeat，详细参考w3c的background-repeat；

3、background-position:此值用来设置元素的背景图片的定位起点，其默认值为left top,详细参考w3c的background-position；

4、background-size: 此值用来设置元素的背景图片的尺寸大小，其默认值为auto，详细参考《CSS3 Background-size》；

5、background-attachment:此值用来设置元素的背景图片是否为固定显示，其默认值为scroll,详细参考background-attachment；

6、background-clip：此值用来控制元素的背景图片显示区域，其默认值为border-box，详细参考《CSS3 Background-clip》；

7、background-origin:此值用来控制元素的背景图片position的默认起始点，其默认值为padding-box,详细参考《CSS3 background-origin》;

8、background-color:此值用来设置元素的背景色，详细参考w3c的background-color。

其中background-image需要多个，但多个图片之间使用逗号隔开,而其他属性可以选择一个或多个，如果有多个背景图片时，其他属性只有一个时，那么表示所有背景图片应用了相同的属性设置，但background-color只能设置一个，如果你设置多少background-color将是一种错误的语法设置。

兼容的浏览器：



CSS3 Multiple Backgrounds在各支持的浏览器下都是统一写法，不需要加上自己的前缀，但如果你使用background-size,background-clip,background-origin时，还是需要另提出写上各浏览器的前缀。

最后规纳一下：CSS3一共给Background增加了四个新属性：background-size用来控制背景图片的尺寸，background-clip用来控制背景图片的显示区域,background-origin用来控制background-position起始原点，以及今天给大定介绍的CSS3 Multiple Background，用来给同一个元素设置多个背景图片

来源： http://www.w3cplus.com/content/css3-multiple-backgrounds