正在阅读：新手必看!CSS背景background使用攻略新手必看!CSS背景background使用攻略

CSS3 中的背景

　　CSS3中的背景有较多改进。最显著的是多背景图片的选项，同时也增加了4个新属性。

　　多背景

　　CSS3中，可以对一个元素应用一个或多个图片作为背景。代码和css2中的一样，只需要用逗号来区别各个图片。第一个声明的图片定位在元素顶部，其它的图片按序在其下排列，例如：

　　新属性：背景修剪(background-clip)

　　这又把我们带回了文章开始讨论的那个关于边框内图片显示的话题。它被描述为“背景描绘区”。

　　background-clip属性用来增强背景显示位置的控制能力。可能的值为：

　　·background-clip: border-box;
　　背景显示在边框内。

　　·background-clip: padding-box;
　　背景显示在内补白(padding)内，而不是边框内。

　　·background-clip: content-box;
　　只在内容内显示背景，而不是内补白(padding)和边框内。

　　·background-clip: no-clip;
　　默认值，和 border-box 一样。

　　新属性：背景原点(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中有了稍许改进。除了设置背景颜色之外，如果元素底层的背景图不可用，还可以设置一个“回退色”。

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

　　此例中，背景色应该是绿色(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 的文章大多涉及网页设计，WordPres并 Pro Blog Design 工作。可以查看更多关于博客设计的文章或者在 twitter 上关注他。

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

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

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

　　原文链接：Backgrounds In CSS: Everything You Need To Know
　　译文链接：css 背景全攻略