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

#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;

“CSS3属性之-背景”的7个回复

评论已关闭。