![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
查无此人Correction status：qualified
Teacher's comments：完成的不错，继续加油
Collection
Collection
background-color:设置颜色background-repea:设置是否平铺background-position：设置背景图像的起始位置background-size:设置背景图片宽度和高度background-attachment:设置背景是否受到滚动条影响为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
例如：background: pink url() no-repeat center;
当使用简写属性时，属性值的顺序为：:
通过使用谷歌浏览器插件：Page Ruler Redux 测量精灵图
或者其他测量工具测量图标大小位置，然后定位所需图片位置
如图所示：
经测量发现单个图片的宽为110px 高为110px.以宽为x轴，高为y轴，从背景大图片左上角为起始点定位所需图片的位置。
如下所示：
< !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>.box1 {width: 500px;height: 400px;border: 1px solid #000;background-image: url("11.png");background-repeat: no-repeat;background-position: 50px 20px;}.box2 {/* 取灰色房子图标 宽和高需要设置为图标大小*/width: 110px;height: 110px;background-image: url("11.png");background-repeat: no-repeat;/* 设置x轴110px y轴为0 */background-position: -110px 0px;}.box3 {/* 取橘黄色地球图标 宽和高需要设置为图标大小*/width: 110px;height: 110px;background-image: url("11.png");background-repeat: no-repeat;/* 设置x轴-220px y轴为-110 */background-position: -220px -110px;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body></html>
1.登录阿里图标的官网：https://www.iconfont.cn/ 注册并登录。
2.根据需要添加至自己项目库，然后下载至本地。
3.按照下载文件里面的引用规则进行引用
<link rel="stylesheet" href="./iconfont.css" />示例如下：
< !DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 引用图标css文件 --><link rel="stylesheet" href="./iconfont.css" /><title>阿里图标font-class 引用</title></head><style>.cookie span {/* 设置大小 */font-size: 40px;color: darkgoldenrod;}.strawberry span {/* 设置大小 */font-size: 40px;color: lightpink;}</style><body><div class="cookie"><!-- 引用icon-food-cookie图标 --><span class="iconfont icon-food-cookie"></span></div><div class="strawberry"><!-- 引用icon-food-strawberry --><span class="iconfont icon-food-strawberry"></span></div></body></html>
总结：精灵图不能随意改变大小和颜色，改变大小会失真模糊。可以使用字体图标进行代替。字体图标的大小要设置给正确的父级，否则没有效果。