![[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
1.背景属性用于定义HTML元素的背景，通常用以下常用属性来控制背景效果
background-color:设置颜色background-clip:控制背景的覆盖范围限制在内容区/裁切background-repea:设置是否平铺
取值：no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺———默认background-position：设置背景图像的起始位置
位置的取值可以为像素，也可以使用关键字：top left bottom right centerbackground-size:设置背景图片宽度和高度background-attachment:设置背景是否受到滚动条影响
（1）scroll会受滚动条的影响，当内容滚动到下方，图片会消失——默认
（2）fixed不会受滚动条影响，一直保持在视线范围内background:linear-gradient:设置渐变色
还可设置渐变角度、例：45deg
还可采用简写模式（将这些属性合并到这一个属性内），
例：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;/* 只写一个关键词第二个默认就是center */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.首先进入阿里图标官网（点击即可进入），注册并登录即可（仅支持微博或github账号）
2.根据自己的需要将图标加入购物车
3.将购物车中的图标都添加到项目中，然后在项目中下载图标
4.下载完成后解压并打开文件
5.根据下载文件的应用规则进行引用
<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>
浏览器显示效果：
注意：精灵图不能随意改变大小和颜色，改变大小会失真模糊。可以使用字体图标进行代替。字体图标的大小要设置给正确的父级，否则没有效果。
天蓬老师