在前端的页面中,难免会用到许多的图片,如果每一个位置的图片都需要一张张的图片,那样不仅会占用大量的空间,而且会降低网页的速度。
css雪碧图(sprite)(也叫精灵图等)就是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点:
【1】减少http请求次数
【2】减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度)
应用方面:
【1】静态图片,不随用户信息的变化而变化(通常在网站上以常态的形式存在)。
【2】小图片,图片容积比较小。
【3】对于img标签设置的内容性图片,是不能合并到雪碧图的,如果合并这些图片会影响页面可读性,语义化降低且可调整的范围小。
【4】对于横向和纵向都平铺的图片,也不能合并到雪碧图中。如果是横向平铺,只能将所有横向平铺的图合并成一张大图,只能竖直排列,不能水平排列;如果是纵向平铺,只能将所有纵向平铺的图合并成一张大图,只能水平排列,不能竖直排列。
![](https://i-blog.csdnimg.cn/blog_migrate/702743c0224eebd3e892d2d0397078cb.jpeg)
雪碧图的使用主要通过将所需要的图片通过软件(主要是Photoshop 或Fireworks )通过一定的规则(间隙,间距,行高的等)整合到一张大的图片里,然后再通过CSS样式中“background-image”,“background- repeat”,“background-position”等基本样式进行处理,以便运用到网页中所需要的位置上。