新属性：(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 。

关于作者

Michael Martin 的文章大多涉及网页设计，WordPress 并为 Pro Blog Design 工作。可以查看更多关于博客设计的文章或者在 twitter 上关注他。

糖伴西红柿：一看到这么长篇大论的也头晕，花了好几天的时间折腾这篇文章。全是基础的只是，没有什么花哨的，但是我觉得最基础的也是最重要的。

鉴于好多网站都会转载别人的文章，当然了，好的文章我们也会转载，不过有些人直接把别人辛辛苦苦的劳动付出拿来当自己的东西。

这些人真的很无耻，这个大环境也真的很悲哀，没人愿意踏踏实实地做事。这就是为什么我们总是翻译国外的文章，而不是把咱们的文章翻译成外语让外国人看的根本所在。

可悲啊。

本文链接：http://www.blueidea.com/tech/web/2009/7001.asp　

出处：前端观察
责任编辑：bluehearts

上一页 CSS背景全攻略 [5] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。