CSS 多重背景
在本章中，您将学习如何为一个元素添加多个背景图像。
您还将学习以下属性
background-sizebackground-originbackground-clip
CSS 多重背景
CSS 允许您通过 background-image 属性为一个元素添加多个背景图像。
不同的背景图像由逗号分隔，图像堆叠在一起，第一个图像最靠近查看者。
下面的示例有两个背景图像，第一个图像是花（对齐底部和右侧），第二个图像是纸张背景（对齐左上角）
示例
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
自己动手试一试 »
可以使用单独的背景属性（如上）或 background 简写属性来指定多个背景图像。
以下示例使用 background 简写属性（与上面的示例结果相同）
示例
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
自己动手试一试 »
CSS 背景尺寸
CSS background-size 属性允许您指定背景图像的尺寸。
尺寸可以以长度、百分比指定，或使用以下两个关键字之一：contain 或 cover。
下面的示例将背景图像的大小调整为比原始图像小得多（使用像素）
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
代码如下
示例
#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
自己动手试一试 »
background-size 的另外两个可能值是 contain 和 cover。
contain 关键字将背景图像缩放到尽可能大（但其宽度和高度都必须适合内容区域）。因此，根据背景图像的比例和背景定位区域，背景可能存在一些未被背景图像覆盖的区域。
cover 关键字将背景图像缩放到使内容区域完全被背景图像覆盖（其宽度和高度都等于或超过内容区域）。因此，背景图像的某些部分可能在背景定位区域不可见。
下面的示例演示了 contain 和 cover 的用法
示例
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
自己动手试一试 »
定义多重背景图像的尺寸
background-size 属性在处理多重背景时，也接受多个背景尺寸值（使用逗号分隔的列表）。
下面的示例指定了三个背景图像，每个图像都有不同的背景尺寸值
示例
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
自己动手试一试 »
全屏背景图像
现在我们希望网站的背景图像始终覆盖整个浏览器窗口。
要求如下
- 用图像填满整个页面（没有空白）
- 根据需要缩放图像
- 将图像居中
- 不要引起滚动条
下面的示例演示了如何实现；使用 <html> 元素（<html> 元素的高度至少等于浏览器窗口的高度）。然后设置一个固定且居中的背景。然后使用 background-size 属性调整其大小
英雄图像
您也可以在 <div> 上使用不同的背景属性来创建英雄图像（带有文本的大图像），并将其放置在您想要的位置。
示例
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
自己动手试一试 »
CSS background-origin 属性
CSS background-origin 属性指定背景图像的位置。
该属性接受三个不同的值
- border-box - 背景图像从边框的左上角开始
- padding-box - （默认）背景图像从内边距边缘的左上角开始
- content-box - 背景图像从内容的左上角开始
下面的示例演示了 background-origin 属性
示例
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
自己动手试一试 »
CSS background-clip 属性
CSS background-clip 属性指定背景的绘制区域。
该属性接受三个不同的值
- border-box - （默认）背景绘制到边框的外边缘
- padding-box - 背景绘制到内边距的外边缘
- content-box - 背景绘制在内容框内
下面的示例演示了 background-clip 属性
示例
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
自己动手试一试 »
CSS 高级背景属性
| 属性 | 描述 |
|---|---|
| background | 在一个声明中设置所有背景属性的简写属性 |
| background-clip | 指定背景的绘制区域 |
| background-image | 为元素指定一个或多个背景图像 |
| background-origin | 指定背景图像的位置 |
| background-size | 指定背景图像的大小 |
