CSS3 中的背景

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

多背景

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

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

新属性：背景修剪(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规则 网站上的几个例子。

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

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

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