聊聊css sprite技术(雪碧图)

css sprite技术，又称“css雪碧图”、“css精灵”。

2017-05-19

---

 

刚接触sprite技术的时候，估计大家都一样，眼里冒星星，直呼好用好用，是吧😄！而且好处也挺多的，背景图一次加载，减少了请求；对于命名困难症的同学说，图片命名也省去了不少麻烦啦！

先通俗地讲下sprite是怎么一回事：是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景（background-image）定位（background-position）来显示需要显示的图片部分。

eg：

1 HTML:
2 <div class="sprite"></div>

style:
.sprite {
      width:;
      height:;
      background: url('') no-repeat;
      background-position: x y;
}
.sprite:hover {
      background-position : a b;
}

HTML文档中写入一个div，样式中通过background／background－image设置背景图片，background-position根据所要用的图标定一个位置[x,y]；在hover中，在设置一个变化后的图标位置[a,b]，（注：位置中 x,y的值就是数学坐标轴中的横纵坐标）。位置的x,y,a,b的值以背景图片的左顶点为（0，0）原点算。

技术，你学不学，它都在那里，千变万化！

推荐：gulp-sprite工具、响应式下的雪碧图解决方案、SVG Sprite技术。