css3.0学习 第二节 背景
1.background-origin
语法：
background-origin:border|padding|content
相关属性：background-clip,background-size
取值：
border:从border区域开始显示背景
padding:从padding区域开始显示背景
content:从content区域开始显示背景
说明：
用来决定background-position计算的参考位置
引擎类型：background-origin
Gecko:-moz-background-origin
Webkit:-webkit-background-origin
Presto:-o-background-origin
兼容性：
Firefox3.0，Firefox3.5，chrome1.0，chrome2.0，opera9.63，Safari3.1，Safari4支持
代码示例：
<div style=" width:250px; border:20px dashed #000; padding:20px; text-align:center; font-weight:bold; color:#000; background:#ccc url(foraspimg/forasp.png) no-repeat; -moz-background-origin:padding; -webkit-background-origin:padding; -khtml-background-origin:padding; background-origin:padding; ">padding<div style=" height:80px; border:1px solid #333; ">content</div></div>
2.background-clip
语法：
background-clip:border-box|padding-box|content-box|no-clip
相关属性：background-origin|background-size
取值：
border-box:从border区域向外裁剪背景
padding-box:从padding区域向外裁剪背景
content-box:从content区域向外裁剪背景
no-clip:从border区域向外裁剪背景
说明：
用来确定背景的剪裁区域
引擎类型：background-clip
Gecko：-moz-background-clip
Webkit:-webkit-background-clip
Presto:-o-background-clip
兼容性：
Firefox3.0，Firefox3.5，chrome2.0，opera9.64，Safari4支持
代码示例：
<div style="border: 20px dotted rgb(102, 102, 102); padding: 20px; background: rgb(204, 204, 204) url(img/logo_qzone.png) no-repeat scroll 0% 0%; width: 300px; text-align: center; font-weight: bold; color: rgb(0, 0, 0); -moz-background-inline-policy: -moz-initial; -moz-background-clip: padding; -moz-background-origin: padding;">padding<div style="border: 1px solid rgb(51, 51, 51); height: 200px;">content</div></div>
3.background-size
语法：
background-size:[<length>|<percentage>|auto]{1,2}|cover|contain
相关属性：background-clip，background-origin
取值：
<length>:由浮点数字和单位标识符组成的长度值，不可为负值
<percentage>:取值为0%到100%之间的值，不可为负值
说明：
设置背景图片的大小，指定背景大小，以像素或百分比显示，当指定为百分比时，大小会由所在区域的宽度，高度，以及background-origin的位置决定，还可以通过cover和contain来对图片进行伸缩
引擎类型：background-size
Webkit：-webkit-background-size
Presto：-o-background-size
兼容性：
chrome1.0，chrome2.0，opera9.63，Safari3.1，Safari4支持
代码示例：
<div style="border: 1px solid #CCCCCC; padding:90px 5px 10px; background:url(foraspimg/forasp.png) no-repeat ; -webkit-background-size: 100% 80px; -o-background-size: 100% 80px; ">这里的 <code>background-size: 100% 80px</code>。 背景图片将与DIV一样宽，高为80px。</div>
4.multiple backgrounds
语法：
background:[background-image]|[background-origin]|[background-clip]|[background-repeat]|[background-size]|[background-position]
相关属性：background-image,background-origin,background-clip,bakcground-repeat,background-size,background-position
取值：
<background-image>:指定或检索对象的背景图像
<background-origin>:指定背景的显示区域，参见background-origin
<background-clip>:指定背景的裁剪区域，参见background-clip
<background-repeat>:设置或检索对象的背景图像是否及如何重复铺排
<background-size>:指定背景图片的大小，参见background-size
<background-position>:设置或检索对象的背景图像位置
说明：
多重背景图像，可以把不同背景图像只放到一个块元素里。
多个图片url之间使用逗号隔开；如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
css3中在容器的多层背景，各子属性与逗号来分隔，如果指定的值，如下：
background-image:w1,w2,w3,...,wm(1,2,3,...,m分别表示w的下标，同理如下)
background-repeat:x1,x2,x3,...,xr
background-size:y1,y2,y3,...,ys
background-position:s1,s2,s3,...sp
当背景层的数值时N=max(M,R,S,P),每个属性可以假如它的值为n，通过重置指定的值如下所示：
background-image: w1,…wM, w1,…wM, w1,… /* N values */
background-repeat: x1,…xR, x1,…xR, x1,… /* N values */
background-size: y1,…yS, y1,…yS, y1,… /* N values */
background-position: s1,…rP, s1,…rP, s1,… /* N values */
范例书写：
background-image: url(foraspimg/multiple-backgrounds.png), url(foraspimg/multiple-backgrounds.png), url(foraspimg/multiple-backgrounds.png);
background-position: left top, -320px bottom, -640px top;
background-repeat: no-repeat, no-repeat, repeat-y;
也可以简写：
background: url(foraspimg/multiple-backgrounds.png) left top no-repeat, url(foraspimg/multiple-backgrounds.png) -320px bottom no-repeat, url(foraspimg/multiple-backgrounds.png) -640px top repeat-y;
兼容性：
chrome1.0，chrome2.0，Safari3.1，Safari4支持
代码示例：
<div style="background-image: url(foraspimg/multiple-backgrounds.png), url(foraspimg/multiple-backgrounds.png), url(forasp/multiple-backgrounds.png); background-position: left top, -320px bottom, -640px top;background-repeat: no-repeat, no-repeat, repeat-y;width:260px;padding:20px;"> <p>这是一个宽为300px，高度自适应的多背景示范容器，完成的一个九宫格模型</p> </div>