CSS3（三）—— CSS3背景

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区域开始显示背景。

说明：

1. 用来决定 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。