CSS3--背景

1. CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片：

#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}


2. CSS3 background-size 属性
CSS3中可以通过background-size指定背景图像的大小，可以指定像素或百分比大小，百分比大小是相对于父元素的宽度和高度的百分比的大小：
background-size: length|percentage|cover|contain;

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)"
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

body
{
background:url(/try/demo_source/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}


3. CSS3 background-Origin属性
CSS3中background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。



div
{
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}


4. CSS3 background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
background-clip: border-box|padding-box|content-box;

#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
}

#example2 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: padding-box;
}

#example3 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}