CSS雪碧图现学现作

一，首先来了解一下什么是CSS雪碧图

• 来看这样的一个网页

你会发现这里面有许多的图片，可是是否真的有这个多张图片呢？ 答案是否认的，整个网页的图片其实只有这样的一张

• 这是怎么办到的呢？ 答案就是，使用CSS雪碧图，也就是多张图片合成为一张图片，而后经过位置的偏移使其与页面元素接合在一块儿所制成的

• 使用雪碧图的好处是什么？ 1.由于多图合成为了一张图，因此减小了网页图片的请求，加快了网页的加载速度； 2.能够重复使用；

---

二，现学现作CSS雪碧图，让咱们来一步步实现相似下面图片这样的效果吧

1.首先，咱们须要一些小图片，能够在阿里巴巴的iconfont里面下载到这些图片

2.下载完毕后打开下载的文件能够看到这些图片，为了后面的方便我将他们命名为了1，2，3，4，5，6

3.而后网上搜索一下雪碧图合成网站，我的推荐雪碧图合成，使用方式以下图：

4.添加完毕点击建立后，出现下图，点击下载png格式图片就出现这个合成图的网络链接了，这样的一张多小图合成的大图就是一张雪碧图

5.建立html文件，并写入一个列表代码，为了方便后面的设置，我添加了class选择器；

6.复制前面咱们获得的雪碧图网址url，添加进每个列表li元素中，并设置其不重复以及它的尺寸为你想要的尺寸，顺便去掉列表的默认样式，获得下面这样的图；

7.设置li元素的文本格式以及宽高等样式，而后添加边框，获得以下图：

8.最后一步，使用前面添加的class选择器对每一个li元素单独设置背景雪碧图所要显示的偏移位置，例如，第三个li元素显示是便便的图，就这样设置：

PS：设置不许偏移量的能够在开发者工具中慢慢调整；

9.最终效果图显示以及代码一览：