你知道精灵贴图吗？优缺点都有什么？

.cssSprites{li{display:inline-block;}.bg-mood_afraid{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-10px-10px;}.bg-mood_angry{宽度：176px；高度：176px；背景:url('../assets/img/css_精灵.png')-206px-10px;}.bg-mood_calm{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-10px-206px;}.bg-mood_expect{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-206px-206px;}.bg-mood_happy{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-402px-10px;}.bg-mood_miss{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-402px-206px;}.bg-mood_nervous{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-10px-402px;}.bg-mood_sad{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-206px-402px;}.bg-mood_surprised{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-402px-402px;}}}}}}}}}}}}}}}}}}}}}这道题其实考的是前端性能优化的一个点。Sprite的英文是CSSSprites。其目的是将多张小图片合并为一张大图片。大图的背景是透明的。使用时，将图片作为背景图片，将不同background-position显示的部分定位。图片。好处减少服务器压力。更少的网络请求和更快的页面呈现。缺点是后期维护困难。添加图片需要重新制作。应用比较麻烦，每张图片都需要计算位置，通过调整位置来显示图片，对误差要求很严格。图片的使用有限制，只能用在背景图片background-image上，不能和标签一起使用。制作精灵图，推荐一个在线制作精灵图的网站：该网站只需要上传你想要的图片，就可以生成右边的精灵图。下载图像，然后您可以引用它。可以直接复制坐标的css代码引用图片。下面贴一个完整的例子：.cssSprites{li{display:inline-block;}.bg-mood_afraid{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-10px-10px;}.bg-mood_angry{宽度：176px；高度：176px；背景:url('../assets/img/css_精灵.png')-206px-10px;}.bg-mood_calm{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-10px-206px;}.bg-mood_expect{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-206px-206px;}.bg-mood_happy{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-402px-10px;}.bg-mood_miss{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-402px-206px;}.bg-mood_nervous{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-10px-402px;}.bg-mood_sad{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-206px-402px;}.bg-mood_surprised{宽度：176px；高度：176px；背景：url('../assets/img/css_sprites.png')-402px-402px;}}}}}}}}}}}}}}}}}}}}}可以看到整个就引用了一张背景图slice，减少了网络请求，但一定程度上增加了客户端的内存消耗。通过background-position设置图片的位置，达到显示想要的背景图片部分的目的。许多网站都有很多小图标。如果这些小图标单独请求网络，肯定会消耗大量的网络资源（每次请求都会有一次连接和断开的时间消耗），但是比较大的图片不推荐。使用sprite图片，由于图片太大，一次请求获取的数据量大，获取这张大图需要很长时间，降低了网页的整体体验。在线体验地址：地址所有源码都可以在我的仓库地址找到：地址学习如逆水行舟，不进则退。前端技术发展迅速。如果你不每天坚持学习，你将无法跟上。我陪你，坚持每天推送博文，和大家一起进步。希望大家可以关注我，尽快收到最新的文章。公众号: