CSS3 背景

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

• background-size
• background-origin

您也将学到如何使用多重背景图片。

浏览器支持

Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性

CSS3 background-size 属性

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

background-size:63px 100px; 表示左右宽度为63像素，上下为100像素。

例子 2

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

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