CSS 多种背景
在本章中，您将学习如何向一个元素添加多张背景图像。
您还将了解以下属性：
background-sizebackground-originbackground-clip
CSS 多重背景
CSS 允许你为一个元素添加多个背景图像，通过 background-image 财产。
不同的背景图像以逗号分隔，并且图像堆叠在一起，其中第一张图像最靠近观看者。
下面的示例有两个背景图像，第一个图像是一朵花（与底部和右侧对齐），第二个图像是纸张背景（与左上角对齐）：
可以使用单独的背景属性（如上所述）或 background 速记属性。
以下示例使用 background 简写属性（与上面的例子结果相同）：
CSS 背景大小
CSS background-size 属性允许您指定背景图像的大小。
大小可以用长度、百分比来指定，或者使用两个关键字之一：contain 或 cover。
以下示例将背景图像调整为比原始图像小得多（使用像素）：
Lorem Ipsum 悲痛
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。
以下是代码：
另外两个可能的值 background-size 是contain 和cover.
这 contain 关键字将背景图像缩放到尽可能大（但其宽度和高度都必须适合内容区域）。因此，根据背景图像和背景定位区域的比例，背景中可能有一些区域未被背景图像覆盖。
这 cover 关键字缩放背景图像，使内容区域完全被背景图像覆盖（其宽度和高度等于或超过内容区域）。因此，背景图像的某些部分可能在背景定位区域中不可见。
下面的例子说明了 contain 和cover:
例子
#div1 {
背景：url(img_flower.jpg)；
背景大小：包含；
背景重复：不重复；
}
#div2 {
背景：url(img_flower.jpg)；
背景尺寸：封面；
背景重复：不重复；
}
亲自尝试 »
定义多个背景图像的大小
这 background-size 当使用多个背景时，属性还接受背景大小的多个值（使用逗号分隔的列表）。
下面的示例指定了三幅背景图像，每幅图像具有不同的 background-size 值：
例子
#示例1 {
背景：url(img_tree.gif) 左上无重复，url(img_flwr.gif) 右下无重复，url(paper.gif) 左上重复；
背景大小：50px，130px，自动；
}
亲自尝试 »
全尺寸背景图像
现在我们想要一个网站上的背景图像始终覆盖整个浏览器窗口。
要求如下：
- 用图像填满整个页面（无空白）
- 根据需要缩放图像
- 将图像置于页面中心
- 不要引起滚动条
下面的例子展示了如何做到这一点；使用<html>元素（<html> 元素的高度至少等于浏览器窗口的高度）。然后为其设置一个固定且居中的背景。然后使用 background-size 属性调整其大小：
英雄形象
您还可以使用不同的背景属性<div>创建一个英雄图像（带有文字的大图像），并将其放置在您想要的位置。
CSS background-origin 属性
CSS background-origin 属性指定背景图像的位置。
该属性有三个不同的值：
- border-box - 背景图像从边框的左上角开始
- padding-box-（默认）背景图像从填充边缘的左上角开始
- content-box - 背景图像从内容的左上角开始
下面的例子说明了 background-origin 财产：
CSS background-clip 属性
CSS background-clip 属性指定背景的绘画区域。
该属性有三个不同的值：
- border-box - （默认）背景绘制在边框的外边缘
- padding-box - 背景被绘制到填充的外边缘
- content-box - 背景绘制在内容框内
下面的例子说明了 background-clip 财产：
CSS 高级背景属性
| 财产 | 描述 |
|---|---|
| 背景 | 在一个声明中设置所有背景属性的简写属性 |
| 背景剪辑 | 指定背景的绘画区域 |
| 背景图 | 为元素规定一个或多个背景图像 |
| 背景原点 | 指定背景图像的位置 |
| 背景尺寸 | 指定背景图像的大小 |
