精灵图
精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术
原理:将多张单一的图片整合到一张图上，以背景引入,并使用background-position调整背景位置，使之显示不同图片
目的:降低浏览器向服务器的请求次数,提高网页加载速度
优点:降低请求次数,多张图整合成一张降低整体大小,整改一张图使得整体风格主题改变,提高维护性
缺点:自适应布局难控制,制作繁琐,不合理的整合图片会导致调用混乱,一张图更改导致整体变化(牵一发动全身)
<div class="sprites"></div>
.sprites:before{ ???content: ""; ???display: block; ???width: 17px; ???height: 17px; ???background: #999; ???background-image: url(img/sprites1.png); ???background-repeat: no-repeat; ???background-position: 0 -118px;}PS：借用360导航页的精灵图。
声明：若有侵权等问题请联系作者，定当及时改正、致歉和删除有问题的文章！
精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术
原文地址：https://www.cnblogs.com/xialy520cxm/p/10108900.html