CSS3中背景的四个新的属性

本文对CSS3中背景的四个新的属性进行了详细介绍。

多重背景图片

Css3中，对一个元素可以使用一张以上的背景图片。除了使用逗号将图片分开以外，其代码与css2相同。第一个声明的图片定位在元素的顶部，接下来的图片层列于下，像这样：

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

Background Clip

该属确定背景画区，有以下几种可能的属性：

Background Origin

它通常与background-position联合使用，你可以从border、padding、content来计算background-position（就像background-clip）。

Background Size

background-size常用来调整背景图片的大小，有以下可能的属性：

Background Break

Css3中，元素可以被分割成单个的盒子（例如，使一个内联的span元素多行排列），background-break 属性控制背景跨越多个盒子如何显示。

改变background-color

Css3对背景颜色有轻微的加强，除了定义背景颜色之外，你还可以定义一个备用颜色，它在元素最底层的图片不能使用时得以生效。如：

1.background-color: green / blue;

在这个例子中，背景颜色为green。但是，如果最底层的图片不能使用，背景颜色将是blue。如果没有定义颜色，就假定是透明的(transparent)。

改变Background Repeat

在css2中，当图片重复时，它经常在元素的底部切断。Css3引入两个新的属性修复它。

space:等量的空白应用到图像块之间直到填满元素。

round:图片缩小直到适合元素。

改变Background Attachment

background-attachment 有一个可能的属性值：local。它通常与能滚动的元素（如：overflow:scroll）一起发挥作用。当background-attachment 为scroll时，元素内容滚动时背景图片不会滚动。background-attachment为local时，元素内容滚动时背景图片会跟着滚动。