必须了解的background几个属性(background-position、background-repeat等)(3)

CSS3中的背景属性

CSS3中有不少关于背景属性的变化。最明显的就是加入了多背景图片的支持，另外还有四个新属性，以及对已有属性的改动。
多背景图片

CSS3允许你为一个元素使用多于一张的背景图片。代码与CSS2中相同，你可以用逗号分隔开几张图片。第一个声明的图片会出现在元素顶部，就像这样：

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

新属性1： Background Clip

这个属性又让我们回到了开始的问题，关于border与background属性的问题。

background-clip 属性让你能控制在哪显示你的背景.可能的值有：

background-clip: border-box;

background 在 border 内显示，和现在的方式一样。.

background-clip: padding-box;

backgrounds 在 padding内显示,而非border，跟IE6的处理方式相同。

background-clip: content-box;

backgrounds 只显示在内容内, 而非border 或 padding。

background-clip: no-clip;

默认值，和border-box一样。

新属性2: Background Origin

这个属性需要和background-position属性一起使用。你可以改变background-position 的计算方式(就像 background-clip一样).

background-origin: border-box;

background-position 从border开始计算。

background-origin: padding-box;

background-position从padding开始计算。

background-origin: content-box;

background-position从内容开始计算。

想看background-clip和background-origin属性应用的例子请看CSS3.info.

新属性3: Background Size

background-size属性用来重定义你的背景图片大小。其可能值有：

background-size: contain;

缩小图片以符合元素大小。

background-size: cover;

扩展图片以符合元素大小。

background-size: 100px 100px;

重定义大小。

background-size: 50% 100%;

用百分比重定义。

你可以看看例子：CSS 3 specifications

新属性4: Background Break

CSS 3中, 元素能分拆成多个部分(例如inline元素span能占多个行)。background-break属性控制背景图像如何在多个部分展示。

可能值有:

Background-break: continuous;默认值

Background-break: bounding-box;: 将两部分之间的值加入考虑.。

Background-break: each-box;: 每个部分单独考虑。

Background Color属性的改变

CSS3中background-color属性支持前景色与底色：background-color: green / blue;

就这个例子，默认颜色是绿色，如果无法显示，则用蓝色。
Background Repeat属性的改变

还记得CSS 2中图片可能会因过界而部分消失吗？ CSS 3 有两个新可能值来解决这一问题:

space: 设置重复图片的间距。

round: 重复图片自动调整大小以正好填充元素。

background-repeat: space的例子：CSS 3 specifications。

Background Attachment属性的改变

background-attachment有个新可能值: local.。它与可滚动的元素相关(比如拥有属性overflow: scroll;).。当background-attachment值为scroll时, 背景图片不会随内容滚动。现在

background-attachment:local，图片可以随内容一起滚动.