CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去
优点：
- 减少图片的字节
- 减少网页的http请求，从而大大的提高页面的性能
原理：
- 通过background-imge引入背景图片
- 通过background-position把背景图片移动到自己需要的位置
实例：
<head>
<style>
.icon1{
display:block;/*转为块级元素*/
width:60px;
height:70px;
background-image:url(./表情包.png);
border:1px solid red;
background-position:-20px -20PX;/*定位你需要的表情包的位置*/
}
.icon2{
display:block;/*转为块级元素*/
width:60px;
height:70px;
background-image:url(./表情包.png);
border:1px solid red;
background-position:-207px -116PX；/*定位你需要的表情包的位置*/
}
</style>
</head>
<body>
<span class="icon1"></span>
<span class="icon2"></span>
</body>
执行结果：
![[从0开始AIGC][LLM]：LLM中Encoder-Only or Decoder-Only？为什么主流LLM是Decoder-Only？](https://i-blog.csdnimg.cn/direct/e5ef648eb1224649a35a3de0a4e35fe4.png#pic_center)
