（1）设置背景图像尺寸的属性。
知识点
- background-size 属性
background-size 属性可以用来控制背景图像的显示大小。语法如下：
background-size: length|percentage|cover|contain;值 | 描述 |
length | 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为 auto（自动）。 |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为"auto（自动）" 。 |
cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:350px;
height:300px;
border:1px solid;
color:rgba(0,0,0,0.445);
background-image: url("j.jpg");
background-size: 350px 300px;
}
</style>
</head>
<body>
<div>
<h3>秋夜寄邱员外</h3>
怀君属秋夜，散步咏凉天。<br/>
空山松子落，幽人应未眠。
</div>
</body>
</html>（2）设置背景图像位置区域的属性。
知识点
- background-origin 属性
background-origin 属性是用来定义背景位置区域的。
其语法格式为：
background-origin: border-box|padding-box|content-box;其属性值的意义如下所示：
属性值 | 描述 |
border-box | 以边框作为原点来定位。 |
padding-box | 以填充区为原点来定位。 |
content-box | 以内容为原点来定位。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
padding: 30px;
background-image: url("icons8-seedling-96.png");
background-repeat: no-repeat;
background-position: left;
background-size: 50px 50px;
}
.content1 {
border: 1px solid rgb(13, 110, 73);
width: 300px;
height: 150px;
background-origin: border-box; /*图片显示在边框处*/
}
.content2 {
border: 1px solid rgb(13, 110, 73);
width: 300px;
height: 150px;
margin-top: 20px;
background-origin: content-box; /*图片显示在内容里*/
}
</style>
</head>
<body>
<div class="content1">
独怜幽草涧边生，上有黄鹂深树鸣。
春潮带雨晚来急，野渡无人舟自横。
</div>
<div class="content2">
天苍苍野茫茫，风吹草低现牛羊。
</div>
</body>
</html>background-origin 属性，它有三个属性值：
- border-box：以边框作为原点来定位。
- padding-box：以填充区为原点来定位。
- content-box：以内容为原点来定位。
（3）设置背景剪裁的属性。
知识点
- background-clip 属性
background-clip 属性是用来定义背景图像裁剪区域的。
其语法格式为：
background-clip: border-box|padding-box|content-box;其属性值的意义如下所示：
值 | 说明 |
border-box | 默认值，背景绘制在边框方框内（剪切成边框方框）。 |
padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 |
content-box | 背景绘制在内容方框内（剪切成内容方框）。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 15px double #83a95c;
padding: 30px;
color: black;
background: #d6efc7;
}
#content2 {
background-clip: padding-box; /*背景绘制在 padding 区域*/
}
#content3 {
background-clip: content-box; /*背景绘制在内容区域*/
}
</style>
</head>
<body>
<div id="content1">
春华沧江月，秋色碧海云。离居盈寒暑，对此长思君。
思君楚水南，望君淮山北。梦魂虽飞来，会面不可得。
畴昔在嵩阳，同衾卧羲皇。绿萝笑簪绂，丹壑贱岩廊。
晚途各分析，乘兴任所适。仆在雁门关，君为峨眉客。
</div>
<br/>
<div id="content2">
心悬万里外，影滞两乡隔。长剑复归来，相逢洛阳陌。
陌上何喧喧，都令心意烦。迷津觉路失，托势随风翻。
以兹谢朝列，长啸归故园。故园恣闲逸，求古散缥帙。
久欲入名山，婚娶殊未毕。人生信多故，世事岂惟一。
</div>
<br/>
<div id="content3">
念此忧如焚，怅然若有失。闻君卧石门，宿昔契弥敦。
方从桂树隐，不羡桃花源。高风起遐旷，幽人迹复存。
松风清瑶瑟，溪月湛芳樽。安居偶佳赏，丹心期此论。
</div>
</body>
</html>（4）设置一张图片作为背景图的属性，本节实验教大家如何给背景添加多张图片。
知识点
- background-image
- backround-position
- background-repeat
在 CSS3 中，background-image 属性的属性值可以包含多个图片的地址。语法如下：
/*图片地址*/
background-image: url(), url(), ..., url();若想让图片放在我们想要的位置，可以使用 background-position 属性设置图片显示的位置。语法如下：
/*图片显示的位置*/
background-position: position1, position2, ..., positionN;若想要设置图片是否重复显示在页面上，我们可以添加 background-repeat 属性。语法如下：
/*图片是否重复*/
background-repeat: repeat1, repeat2, ..., repeatN;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#content1 {
/*小图片来自 icons*/
background-image: url("icons8-rat-96.png"), url("nemuel.jpg");
background-position: right bottom, left top; /*相对于父元素大小，老鼠图片右下角显示，大背景图片在左上角显示*/
background-repeat: no-repeat, no-repeat; /*两张图片不重复*/
padding: 15px;
width: 400px;
height: 260px;
}
</style>
</head>
<body>
<div id="content1"></div>
</body>
</html>