手册
目录
CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。
不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。
下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）：
#example1 {
background-image: url(flower.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
多重背景图像可以使用单独的背景属性（如上所述）或 background 简写属性来指定。
下面的例子使用 background 简写属性（结果与上例相同）：
#example1 {
background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
CSS background-size 属性允许您指定背景图像的大小。
可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。
下面的例子将背景图像的大小调整为比原始图像小得多（使用像素）：
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(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat,
url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。
具体要求如下：
下面的例子显示了如何实现它：使用 元素（ 元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小：
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
您还可以在
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
CSS background-origin 属性指定背景图像的位置。
该属性接受三个不同的值：
下面的示例展示了 background-origin 属性：
#example1 {
border: 10px solid black;
padding: 35px;
background: url(flower.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
CSS background-clip 属性指定背景的绘制区域。
该属性接受三个不同的值：
下面的例子展示了 background-clip 属性：
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
| 属性 | 描述 |
|---|---|
| background | 用于在一条声明中设置所有背景属性的简写属性。 |
| background-clip | 规定背景的绘制区域。 |
| background-image | 为一个元素指定一幅或多幅背景图像。 |
| background-origin | 规定背景图像的放置位置。 |
| background-size | 规定背景图像的大小。 |
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
