CSS3属性之-背景

CSS3中背景增加了4个新属性。背景大小，背景显示区域，背景裁剪区域，以及多背景。

1.背景大小Background-size：

background-size常用来调整背景图片的大小，有以下可能的属性：
background-size: contain;缩小图片以适合元素（维持像素长宽比）;
background-size: cover;扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px;按照指定的长宽来显示图片
background-size: 50% 100%;缩小图片至指定的大小，百分比是相对包含元素的尺寸.
background-size: 100% 80px；还可以采用百分比和像素混合显示。

#background-size {
border: 1px solid #CCCCCC;
padding:90px 5px 10px; 
background:url(../img/gg.png) no-repeat ;
-moz-background-size: 100% 80px;
}

2.Background Origin

background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。

#background-origin{
width:250px;
height:100px;
border:20px dashed #000;
padding:20px;
background:#ccc url(img/logo_qzone.png) no-repeat;
-moz-background-origin:padding;
-webkit-background-origin:padding;
background-origin:padding;
}

3.background-clip

用来确定背景的绘制区域,或者说是背景画布。

取值：border-box|padding-box|content-box

bankground-clip:border-box;

4.多背景

CSS3中，对一个元素可以使用一张以上的背景图片。多个图片url之间使用逗号隔开即可。如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

范例书写：

background-image: url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png);

background-position: left top, -320px bottom, -640px top;

background-repeat: no-repeat, no-repeat, repeat-y;

也可以简写：

background: url(img/multiple-backgrounds.png) left top no-repeat,

url(img/multiple-backgrounds.png) -320px bottom no-repeat,

url(img/multiple-backgrounds.png) -640px top repeat-y;