CSS3background中属性值介绍

background-size

语法：

background-size：<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

取值：

auto 背景图像的真实大小，默认值

<length> 用长度值指定背景图像大小

<percentage> 用百分比指定背景图像大小

cover 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器

contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

说明：

如果取值为2个，则第一个定义宽度，第二个定义高度，如果只提供一个，则只定义宽度，高度为auto。

兼容性：（来自http://css.doyoe.com/）

一些代码：

css

[css]  view plain  copy

1. div {  
2.    width: 200px;  
3.    height: 160px;  
4.    border: 5px dashed #ccc;  
5.    background: url(demo.png) no-repeat;  
6.    float: left;  
7.    margin: 10px;  
8.    text-align: center;  
9.    line-height: 160px;  
10.    font-size: 20px;  
11. }  
12. .cover {  
13.    background-size: cover;  
14. }  
15. .contain {  
16.    background-size: contain;  
17. }  
18. .percentage {  
19.    background-size: 80% 50%;  
20. }  
21. .length {  
22.    background-size: 50px 150px;  
23. }  
24. .auto_height {  
25.    background-size: 100px auto;  
26. }  

html

[html]  view plain  copy

1. <div>auto</div>  
2. <div class="cover">cover</div>  
3. <div class="contain">contain</div>  
4. <div class="percentage">percentage</div>  
5. <div class="length">length</div>  
6. <div class="auto_height">auto_height</div>  

效果：

background-origin

语法：

background-origin：<box> [ , <box> ]*

<box> = border-box | padding-box | content-box

取值：

padding-box 默认值，从padding区域（含padding）开始显示背景图像

border-box 从border区域（含border）开始显示背景图像

content-box 从content区域开始显示背景图像

说明：

该属性计算背景图像background-position的参考原点(位置)

兼容性：（来自http://css.doyoe.com/）

一些代码：

css

[css]  view plain  copy

1. div {  
2.    width: 200px;  
3.    height: 160px;  
4.    padding: 20px;  
5.    border: 15px dashed #ccc;  
6.    background:green url(demo.png) no-repeat;  
7.    float: left;  
8.    margin: 10px;  
9.    text-align: center;  
10.    line-height: 160px;  
11.    font-size: 20px;  
12. }  
13. .padding_box {  
14.    background-origin: padding-box;  
15. }  
16. .border_box {  
17.    background-origin: border-box;  
18. }  
19. .content_box {  
20.    background-origin: content-box;  
21. }  

html

[html]  view plain  copy

1. <div class="padding_box">padding-box</div>  
2. <div class="border_box">border-box</div>  
3. <div class="content_box">content-box</div>  

效果：

background-clip

语法：

background-clip：<box> [ , <box> ]*

<box> = border-box | padding-box | content-box | text

取值：

border-box 默认值，从border区域（不含border）开始向外裁剪背景

padding-box 从padding区域（不含padding）开始向外裁剪背景

content-box 从content区域开始向外裁剪背景

说明：

指定对象的背景向外裁剪的区域

兼容性：（来自http://css.doyoe.com/）

一些代码：

css

[css]  view plain  copy

1. div {  
2.    width: 200px;  
3.    height: 160px;  
4.    padding: 20px;  
5.    border: 15px dashed #ccc;  
6.    background:green url(demo.png) no-repeat;  
7.    float: left;  
8.    margin: 10px;  
9.    text-align: center;  
10.    line-height: 160px;  
11.    font-size: 20px;  
12. }  
13. .border_box {  
14.    background-clip: border-box;  
15. }  
16. .padding_box {  
17.    background-clip: padding-box;  
18. }  
19. .content_box {  
20.    background-clip: content-box;  
21. }  

html

[html]  view plain  copy

1. <div class="border_box">border-box</div>  
2. <div class="padding_box">padding-box</div>  
3. <div class="content_box">content-box</div>  

效果：

注释：CSS3中，允许多背景图像，以上三个background属性均支持对多背景图像定义。