揭秘CSS(第 1 版)
4.5.9 多重背景
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

边框

背景

背景裁剪区域

背景起始位置

背景尺寸

背景附着

背景位置

背景重复

背景图像

背景颜色

多重背景

在CSS3之前,一个元素只能设置一个背景图像。而CSS3中,可以为一个元素添加多个背景图像。定义多图像背景时,只需在 background-image 或 background 属性列出需要使用的所有背景图像,并用逗号隔开。而且,每个背景图像都具有 background 中的任何属性,如可以设置背景位置、设置背景重复、设置背景尺寸等,多个属性值按顺序依次对应。如果某个属性只提供了一个参数值,则所有背景的该属性都使用这个参数值。

默认情况下,背景图像从元素的左上角开始显示,并会在水平方向和垂直方向重复。如果多重背景图像之间存在交集(即背景相互重叠),前面定义的背景图像会覆盖在后面定义的背景图像之上。

所以,定义多背景时,还需要设置背景图像的显示位置和平铺方式。否则,背景重叠的区域会发生覆盖,影响甚至看不出多重背景的效果。如:

div {
    width: 200px;
    height: 200px;
    border: 1px dashed #ccc;
    background-color: yellow;
    background-repeat: no-repeat;
    background-position: left top, right bottom;
    background-image: url(img/bg.gif), url(img/bg2.gif);
}

上述代码中,为容器定义了两幅背景图像,一幅图像在左上角,一幅图像在右下角,并把背景颜色设置为黄色。应用多重背景后的显示效果如图 4‑36 所示:

多重背景
图4-36 多重背景

从上图可以看出,背景图像没有覆盖到的地方,显示黄色背景颜色。这是因为,如果一个元素同时定义了背景颜色和背景图像,它们会同时生效。当 background-image 属性取值为 none 或指定的 url 无效时,则会显示背景颜色;当背景图像可用时,背景图像将覆盖在背景颜色之上,如果背景图像不能占满整个容器,背景图像没有覆盖的地方也会显示背景颜色。

在定义多重背景时,除了使用独立属性外,也可以复合属性。使用复合属性时,使用逗号来分隔每组背景参数。

使用这种方法的好处是,开发者既可以指定备用背景颜色,也可以为老浏览器指定背景图像。如:

div {
   …
   background: yellow url(img/bg.gif) no-repeat left top;  /* 备用颜色和图像 */
   background: url(img/bg.gif) no-repeat left top,
               url(img/bg2.gif) no-repeat right bottom;
}

这跟前面的代码几乎是相同的,只是使用了复合属性,而且还为IE8 及其他老浏览器同时提供了背景颜色和背景图像。并且,在现代浏览器中,显示效果也跟前面完全相同。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验