CSS3 背景

CSS3 引入了一些新的背景属性，使得背景的控制更加灵活和丰富。以下是一些主要的新背景属性及其功能：

多背景图片

CSS3 允许在一个元素上应用多个背景图片。这些图片可以通过逗号分隔，并按顺序堆叠显示，最前面的图片位于最顶层。例如：

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

背景尺寸（background-size）

此属性用于调整背景图像的大小。可以指定像素、百分比或使用关键字如 contain（保持比例填充元素）和 cover（保持比例覆盖元素）。例如：

background-size: 100px 100px;
background-size: 50% 100%;
background-size: contain;
background-size: cover;

背景原点（background-origin）

此属性用于定义背景图像的定位区域。它可以是 border-box（边框内）、padding-box（内边距内）或 content-box（内容区内）。例如：

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

背景剪切（background-clip）

此属性用于定义背景的绘制区域。它可以是 border-box（边框内）、padding-box（内边距内）、content-box（内容区内）或 text（文本内）。例如：

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

背景平铺（background-repeat）

CSS3 扩展了背景平铺的选项，增加了 space（在图片之间添加空白以填满元素）和 round（调整图片大小以正好平铺元素）。例如：

background-repeat: space;
background-repeat: round;

背景附着（background-attachment）

增加了 local 值，用于配合可以滚动的元素（如设置了 overflow: scroll; 的元素）。当设置为 local 时，背景图像会随着内容的滚动而滚动。例如：

background-attachment: local;

背景色（background-color）

CSS3 允许在背景色中设置一个“回退色”，当底层背景图像不可用时使用。通过在回退色之前增加一个斜杠（/）来实现。例如：

background-color: green / blue;

背景图像的多重使用

可以给不同的图片设置多个不同的属性，例如

#example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }

这些新属性使得 CSS3 在背景处理方面提供了更多的灵活性和控制力，从而能够创建更丰富和动态的视觉效果。