CSS教程:CSS背景全攻略(4)

新属性：背景原点(background-origin)

这个属性和 background-position 结合起来使用。可以从边框，内补白或者内容盒子开始计算 background-position (类似于 background-clip)。

* background-origin: border-box;
以边框为原点开始计算 background-position.
* background-origin: padding-box;
以内补白为原点开始计算 background-position
* background-origin: content-box;
以内容盒子为原点开始计算 background-position
对于 background-clip 和 background-origin 不同的一个解释参看 CSS3.info

新属性： 背景尺寸(background-size)

background-size 用来调整背景图的大小。有好几个可能值：

* background-size: contain;
缩小图片来适应元素的尺寸(保持像素的长宽比)
* background-size: cover;
扩展图片来填满元素(保持像素的长宽比)
* background-size: 100px 100px;
调整图片到指定大小
* background-size: 50% 100%;
调整图片到指定大小。百分比是相对于包含元素的尺寸的。

可以看一下 CSS3规则 网站上的几个例子。

新属性：(background-break)

CSS3 中，元素可以被分成几个独立的盒子(例如 使内联元素 span 跨越多行)。background-break 属性用来控制背景怎样在这些不同的盒子中显示。

可能值为：

* Background-break: continuous;
默认值。忽略盒之间的距离(也就是像元素没有分成多个盒子，依然是一个整体一样)
* Background-break: bounding-box;
把盒之间的距离计算在内
* Background-break: each-box;
为每个盒子单独重绘背景

背景色(background-color)的改进

background-color 在 css3 中有了稍许改进。除了设置背景颜色之外，如果元素底层的背景图不可用，还可以设置一个“回退色”。

通过在回退色之前增加一个斜杠(/)来实现，例如：

background-color: green / blue;

此例中，背景色应该是绿色(green)。然而，如果底层背景图不能使用的话，背景色就是蓝色而不是绿色。如果在斜杠前不指定颜色，默认为透明(transparent)。

背景平铺(background-repeat)的改进

CSS2中当图片平铺时，会被元素在末端截断。CSS3 引入了两个属性来修正这个问题:

* space: 应用同等数量的空白到图片之间，直到填满整个元素
* round: 缩小图片直到正好平铺满元素
关于 background-repeat: space; 的一个例子，可以在 CSS3 规则网站看到。

背景附着(background-attachment)的改进

background-attachment 属性增加了一个新值：local。这是用来配合可以滚动的元素的(设置为 overflow: scroll; 的元素)。当 background-attachment 设置为滚动(scroll)时，背景图不会随元素内容的滚动而滚动。

设置为 background-attachment :local; 时，背景图会随内容的滚动而滚动。

总结

总结一下，css 中关于背景有许多需要知道的知识。但是一旦把这些知识融会贯通了，这些技术和命名约定就变得非常有意义而且很快就会成为潜意识行为了。

如果刚接触 css，主要不断联系就可以较快地掌握背景的要点了。如果是老手，我希望你可以和我一样期待 css3 。