css3中背景

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。

background-size

background-origin

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;}

CSS3 background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

实例

在 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;}