精灵图

发表于 | 分类于 | 阅读次数
undefined

刚学的时候，总觉得精灵图是很屌很牛逼的。

什么是css sprites

直译过来就是我们常说的精灵图，这么一说好像很神奇的技术，换个名字你就懂了。CSS图像拼合，贴图定位。再再再通俗一点说，将多个图片融合到一张图里面，然后利用css background的背景定位技术技巧布局网页背景。再解释一层就是将多个小图标融合到一张图里面，减少http请求，提高性能

适用场景

说过上面的解释，应该你就懂了场景是什么。很明显是小图标小素材，假如你将好几张大图都拼在一起来定位，那个速度还不如你分三张图来下载来得更快，性能更好。

优缺点

优点很明显，不多说，前面说了。
缺点说起来就更多是程序员的抱怨了。因为图片是需要自己用ps去拼接的，而且定位的位置都需要精准的测量。更大的缺点就是如果需要修改，将会十分的麻烦。因为每一个图标都是尽量挨在一起，很容易导致你调整一个位置，牵一发而动全身，全部都需要重新测量修改设置。 想想就头皮发麻

实例

给点小tips：

  • 图片间的间隙尽可能地多留。利用10px或者7px，最少也要有5px。
  • 设置图片的位置的话，多预留1~2px可以有效防止图片被切割。

设置

1
2
3
4
5
6
background: url('图片地址') no-repeat;
background-size: 精灵图的大小;
background-position: 精灵图中的位置。注意使用负值
width: 宽高也是图标的宽高
height: