CSS3背景定位 background-origin

background-size　大小 语法 background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain <length>： 由浮点数字和单位标识符组成的长度值。不可为负值。 <percentage>： 取值为0%到100%之间的值。不可为负值。

background-origin　定位 语法 background-origin ： border-box 从border区域开始显示背景。 padding-box 从padding区域开始显示背景。 content-box 从content区域开始显示背景。

background-size 属性规定背景图片的尺寸。

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

例子 1

调整背景图片的大小：

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

例子 2

对背景图片进行拉伸，使其完成填充内容区域：

div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
}

实例

在 content-box 中定位背景图片：

div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}