IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景

CSS3规范中对背景这一部分，新加入了一些有用的功能，如可以设置多个背景图片、可以指定背景大小、设置背景渐变等功能。CSS3规范中定义的背景属性新增了background-clip、background-origin、background-size，这三个属性描述如表1：

表1  CSS3新增背景属性

1  多背景

CSS3允许设置多个背景图片，每个背景用逗号隔开，每个背景图片占一层，层的上下显示按照在CSS中写的顺序来定，最先写的背景在最上层。

多背景的格式如下：

background: url(a.jpg) 0 0，url(b.jpg) 0 100%;

这里，我们使用三个图片为div制作三层背景，第一种方法是背景的简写方式，代码如下：

上述代码为div设置了三层背景，每层的背景图片平铺方式设为不重复，第一层背景引用了“bg1.jpg”图片，位于该div“0 0”的位置；第二层背景引用了“bg2.jpg”图片位于“200px 0”的位置；第三层背景引用了“bg3.jpg”图片位于“400px 0”位置。在浏览器里运行的结果如图1所示：

图1  三层背景重叠

除了这种简写方法外，我们还可以将background属性拆分开来，使用background-image、background-repeat和background-position分别来设置背景图片的地址，平铺方式和位置，CSS代码如下：

这段代码就是对上面代码的一个改写，在浏览器里的执行效果一样。值得注意的是，背景渐变也是一种背景层。下面我们为div设置三层背景，第一层背景为背景渐变，第二层背景为背景图。CSS代码如下：

第一层为从左到右的“rgba(255,255,0,1)”到“rgba(255,0,0,0)”的渐变背景，第二层为“itxdl.jpg”的背景图。在浏览器里运行的结果如图2：

图2  背景渐变层

2  背景尺寸

CSS3还新增了背景尺寸background-size属性，该属性可以设置具体的值，百分比等。该属性的取值及描述如表2：

表2  背景尺寸属性取值及描述

当我们为background-size设置一个值时，那么第二个值会被设置为“auto”。若对背景图片设置两个值时未与背景图本身大小成比例，容易是图片失真或变形。

下面有一个高度和宽度为200px的div，而我们想要将一张宽高为600px的图片作为背景图。我们想要将该图片填充到这个div的话，若没有background-size的属性，我们就需要使用一些软件将这张图片压缩再为设置背景，否则背景图片会溢出。未使用background-size时，CSS代码如下：

在浏览器里运行的结果如图3：

图3  背景图片未使用background-size

在这里我们只能看到“itxdl2.jpg”的左上角的三分之一。在为该背景图片的background-size设置为“200px 200px”、“200px auto”、“auto 200px”、“cover”和“contain”都可以达到全填充的目的。例如，我们在这里使用“200px auto”，增加“background-size: 200px auto”，CSS代码如下：

在浏览器里运行的结果如图4：

图4  背景图片全填充

只有当background-size值为auto时，背景图片才不会变形失真，而其他值都会造成背景图片变形夫真，所以大家使用时需要仔细考虑好，以免给你的制作带来不良效果。

3  background-origin

CSS3可以使用background-orgin属性设置图像的基准位置。该属性的取值及描述如表3：

表3  background-origin属性取值及描述

该属性默认取值为“padding-box”，顾名思义，从图像的填充框开始绘制。指定了背景从哪个区域(边框、补白或内容)开始绘制，但也仅仅能控制背景开始绘制的位置，你可以用这个属性在边框上绘制背景，但边框上的背景显不显示出来那就要由background-clip来决定了。background-clip在下面的内容会提到。

这里，我们将div的边框设为半透明，体现出边框，又体现出边框中的背景。将其的背景图的background-origin设置为border-box，将其边框设为半透明。这时图像从边框界开始填充，代码如下：

该div的背景图从边框开始绘制，在浏览器里运行的结果如图5：

图5  背景图片基准位置

4  background-clip

CSS3可以使用background-orgin属性规定背景的绘制区域。background-clip控制的不仅仅是背景图片，而是控制整个元素背景的显示范围。该属性的取值及描述如表4：

表4  background-origin属性取值及描述

该属性的默认取值为“border-box”。指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。

这里，我为div设置“padding: 10px”。将其背景图的background-clip设置为content-box。这时图像背景从边框界开始填充，CSS代码如下：

在浏览器里运行的结果如图6所示：

图6  背景图片规定绘制区域