CSS3 为背景图片引入了丰富的特性,这意味我们开发者对背景图片有了更多的掌控权。
多背景图片
CSS3 对现有的 background-*
属性进行了扩展,几乎所有的 background-*
属性现在都可以接受多个值,除了 background-color
属性。
下面我们介绍使用 background-image
属性为元素添加多个背景层:
|
|
在示例代码中 background-image
使用了两张图片,但是在显示时,列表中的第一层图片(sunny.png
)会成为最顶层,位于后面的图片将会按声明的顺序先后显示在它的下面。另外,background-position
属性值的顺序遵顼与 background-image
相同的顺序。
注意:background-repeat
属性只有一个唯一的值,如果一个属性的值的数量比其背景图片的数量少,那么这些值就会被重复。在上面的示例中,no-repeat
将会被应用到所有的背景层图片上。
我们可以对 background
简写属性使用多个值,和独立的属性一样,我们也只需要提供一个逗号隔开的列表。上面示例使用简写方式改写如下:
|
|
如果同时设置了背景图像 background-image
和 背景颜色 background-color
,那么背景图像将覆盖在背景颜色之上。所以,如果我们需要背景颜色的话,那么在写属性代码时应该将其置于逗号隔开的列表的最后位置。
|
|
不过,老版本的浏览器将会忽略以上语法,并引用层叠中的前一条规则。所以,我们应该在使用多值之前在元素上声明一个属性,作为一种优雅降级方案。例如:
|
|
在这种情况下,不支持的浏览器将会忽略使用多值的属性,然后使用在它之前的单值。不过,要注意在 IE 中,我们需要为这两者使用简写属性,因为如果我们使用 background-*
属性,它们就会优先于简写属性,不会有图片显示出来。
背景位置
CSS3 并没有新增与背景位置有关的属性,不过倒是为两个已有属性了增加了新的属性值。
background-attachment
第一个与背景位置相关的属性是 background-attachment
,用于设置背景图是跟随对象滚动还是固定的。其原本只有两个值 fixed
和 scroll
,但CSS3 为其新增了一个值 local
。
fixed
: 表示背景图相对于窗口固定位置。scroll
: 表示背景图相对于元素固定,也就是说当元素内容滚动时背景图不会跟随着滚动,因为背景图总要跟着元素本身,但背景图会随元素的祖先或窗口一起滚动。local
: 意味着背景图相对于元素固定,但是当元素滚动时背景图也会随之滚动,因为背景图总是要跟着内容。
background-position
第二个属性是 background-position
,用于设置背景图开始显示的位置。其语法如下:
|
|
该属性默认值为 left top
,即背景图从左上角开始显示。
它的属性值可以为数值、百分比值、关键字值。其中,数值和百分比值指定背景图填充的位置,可以为负值。属性值需要两个参数,第一个会被用于横坐标,第二个会被用于纵坐标,如果我们仅仅只设定了一个值,那么第二个会被默认设为 center
。
可用的关键字值有以下:
left
<==>left center
right
<==>right center
top
<==>top center
bottom
<==>bottom center
center
<==>center center
以上关键字可以组合,所有合法的组合如下:
left top
<==>top left
left center
<==>center left
left bottom
<==>bottom left
right top
<==>top right
right center
<==>center right
right bottom
<==>bottom right
top left
top center
<==>center top
top right
bottom left
bottom center
<==>center bottom
bottom right
center center
center left
center right
center top
center bottom
示例,背景图在容器中居中显示:
|
|
而在 CSS3 中,background-position
属性允许最多提供 4 个参数值,如果提供 3 或 4 个参数值,那么每个 length 或 percentage 偏移值前都必须跟着一个关键字(不包括 center),偏移量相对于关键字所表示的位置进行偏移。
示例,假设背景图在容器中右下方,并且距离右边和底部各有 20px:
|
|
背景尺寸
CSS3 新增了一个属性 background-size
,通过使用它我们能控制背景图片的缩放。该属性的值可以是一对长度或者百分比值、一个单独的长度或者百分比值(不允许负值),或者关键字。
该属性的默认值是 atuo
,即以原图的宽高为准不变。
如果使用一对值,其语法是
|
|
如果使用单个值,则该值会被认为是宽度的大小,而高度则会使用默认值 auto
。
另外,还有两个可用的关键字如下:
contain
: 背景图等比缩放,但是其宽高不会超过容器的长或宽,整个背景图始终会被包含在容器内。cover
: 背景图片等比缩放到容器的宽度或高度(向更大的那个值看齐),会完全覆盖容器,背景图像可能会超出其容器,即在容器中无法看到整个背景图的全貌
精确控制图片位置:显示截至位置和显示原点
在 CSS2 中,背景图定义的位置是相对于其包含元素的 padding
的外边界的,所有溢出都会扩展到边框之下。CSS3 引入了两个新的属性,可以对其进行更精确的控制。
background-clip
第一个属性是 background-clip
,它设置盒模型的哪一部分成为背景显示的截至位置。其语法如下:
|
|
background-clip
属性的取值如下:
- 默认值
border-box
- 可用的关键字值
border-box
:背景图显示到border
外边界处为止padding-box
:背景图显示到padding
外边界处为止content-box
:背景图显示到content
外边界处为止
该属性当前在 Opera 中的得到了实现,在 Firefox4 和 IE9 应该也没有问题。较老的 Firefox 版本使用的是非标准的实现,使用值 border
和 padding
分别替代了 border-box
和 padding-box
,在属性上使用了专用的 -moz-
前缀。
Webkit 的情况较为复杂,它最早的实现使用了 border
和 padding
值,就像早期 Firefox 一样,并且也使用了 content
关键字代替了 content-box
,而且在所有属性上都具有 -webkit-
前缀。较新的版本使用 border-box
padding-box
content-box
,但仍然使用带前缀的属性。最新的 Webkit 版本,使用 border-box
padding-box
的时候没有了前缀,但在使用 content-box
时仍需要前缀。鉴于以上情况,若要编写跨浏览器代码,或许像下面这样:
|
|
background-origin
第二个属性是 background-origin
,它可用来设置背景开始显示的原点。该属性的取值同 background-clip
属性可用的关键字值一样,具体可用取值如下:
默认值
padding-box
可用的关键字值
content-box
padding-box
border-box
这个属性与之前 background-clip
属性的区别为:
background-clip
用于指定元素对象的背景图显示的截至位置background-origin
是用于指定元素对象的背景图像计算background-position
时的参考原点,也就是说,这个属性是与background-position
属性一起配合使用。background-position
负责设定背景图从容器的哪一块位置开始,而background-origin
则负责更精确地控制是从容器盒模型的哪一层边界开始。
和 background-clip
一样,Opera 和最新的 Webkit 浏览器对 background-origin
的实现和规范一致,而 Firefox4 和 IE9 应该也是相同的。较老的 Firefox 和更老一些的 Webkit 版本并没有实现这个属性的标准版本,它们使用带有前缀的属性实现了三个像 border
padding
content
一样的可能值,而老一点的 Safari5 之前的 Webkit 版本要求使用正确的值,也是通过带前缀的属性实现。因此,跨浏览器代码看上去如下:
|
|
背景重复
background-repeat
属性可以控制背景图的重复方式,其取值如下:
默认值
repeat
: 水平和垂直方向都重复
可用的关键字取值
no-repeat
:不重复repeat
repeat-x
: 仅在水平方向重复repeat-y
: 仅在垂直方向重复
通过设置这些值中的某一个可以使背景图沿着元素的某一轴线(或者两条轴线)进行平铺,但无法实现更为精确的控制。CSS3 引入了两个新的属性值:
space
: 背景图以相同的间距(除了第一次和最后一次)平铺且填充在整个容器或某个方向。不会对背景图进行裁剪和缩放,容器内重复的背景图之间可以看到有明显间距round
: 会缩放背景图,尽可能多地进行重复直到适应且填充整个容器。这个属性值将计算能够水平和垂直填充包含元素的图片的最大完整数量。
background-*属性简写
background-*
独立属性纷杂繁多,简写时需要按照以下规则:
|
|
下面以示例说明:
|
|
由于 background-color
只能设置一次,且由于写在前面的背景会叠在之后的背景上,所以背景色通常都定义在最后一组上,避免背景色将背景图遮盖。
上面示例代码等价于以下独立属性写法:
|
|
如果定义了多个背景图片,而其他属性的参数值只有一个,那么这些参数值就会被应用到所有背景图上,根据此原则,可以对上面代码进行缩写:
另外,如果定义了多个背景图片,而 background-origin
和 background-clip
设置了相同的值,还可以简写为:
|
|