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 属性还接受多个背景大小值（使用逗号分隔列表）。
以下示例指定了三个背景图片，每个图片都有不同的 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;
}
尝试一下 »
全尺寸背景图片
现在我们希望网站有一个背景图片，始终覆盖整个浏览器窗口。
要求如下：
- 图片填充整个页面（无空白）
- 根据需要缩放图片
- 图片在页面上居中
- 不要出现滚动条
以下示例展示了如何实现；使用``元素（``元素的最小高度至少为浏览器窗口高度）。然后在其上设置一个固定居中的背景。最后使用`background-size`属性调整其大小。
英雄图片
你也可以在`
示例
.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 | 指定背景图片的大小 |
