CSS3 背景
CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。
在本章，您将学到以下背景属性：
- background-size
- background-origin
- background-clip
您也将学到如何使用多重背景图片。
浏览器支持
| 属性 | 浏览器支持 | ||||
|---|---|---|---|---|---|
| background-size | |||||
| background-origin |
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
background-size
语法：
background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain
取值：
- <length>：
- 由浮点数字和单位标识符组成的长度值。不可为负值。
- <percentage>：
- 取值为0%到100%之间的值。不可为负值。
说明：
设置背景图片的大小。
指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。
| 引擎类型 | Gecko | Webkit | Presto |
|---|---|---|---|
| Background-size | -webkit-background-size | -o-background-size | |
代码与实例
CSS代码：
.background_size{
width:200px;
padding:100px 0 10px;
background:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg) no-repeat;
-webkit-background-size:100% 90px;
-o-background-size:100% 80px;
}
HTML代码：
<div class=”background_size”>背景图片大小被拉伸（宽度100%，高度80px）</div>
效果截图
background-clip
(http://www.w3school.com.cn/cssref/pr_background-clip.asp)
语法：
background-clip ： border-box | padding-box | content-box | no-clip
取值：
- border-box：
- 从border区域向外裁剪背景。(默认值)
- padding-box：
- 从padding区域向外裁剪背景。
- content-box：
- 从content区域向外裁剪背景。
- no-clip：
- 从border区域向外裁剪背景。
说明：
用来确定背景的裁剪区域。
| 引擎类型 | Gecko | Webkit | Presto |
|---|---|---|---|
| background-clip | -moz-background-clip | -webkit-background-clip | -o-background-clip |
代码与实例
CSS代码：
.background_clip{
width:256px;
height:180px;
padding:20px;
border:20px dotted #cad5eb;
background:#f0f3f9 url(http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;
-moz-background-origin:padding;
-webkit-background-origin:padding;
-moz-background-clip:padding;
-webkit-background-clip:padding;
text-shadow:1px 1px white;
}
HTML代码：
<div class=”background_clip”>注意背景图片及背景颜色起始的位置</div>
效果截图
详细
实例可参考
w3school
;
backgound-clip:content;的显示效果，在chrome下截得图
background-origin
(http://www.w3school.com.cn/cssref/pr_background-origin.asp)
语法：
background-origin ： border | padding | content
取值：
- border：
- 从border区域开始显示背景。
- padding：
- 从padding区域开始显示背景。（默认值）
- content：
- 从content区域开始显示背景。
说明：
- 用来决定 background-position 计算的参考位置。
| 引擎类型 | Gecko | Webkit | Presto |
|---|---|---|---|
| background-origin | -moz-background-origin | -webkit-background-origin | -o-background-origin |
代码与实例
CSS代码：
.background_origin{
width:256px;
height:180px;
padding:20px;
border:20px dashed #cad5eb;
background:#f0f3f9 url(http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;
-moz-background-origin:padding;
-webkit-background-origin:padding;
-khtml-background-origin:padding;
background-origin:padding;
text-shadow:1px 1px white;
}
HTML代码：
<div class=”background_origin”>注意背景图片起始的位置</div>
效果截图
详细实例可参考w3school;
心得：这么看来，background-clip是截取图片，图片会默认在padding位置显示，但是如果设置的是content则只显示content部分的图片；
background-origin 则是控制图片的显示区域；两个属性默认都是padding。
