CSS雪碧图现学现做

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

• 来看这样的一个网页

Paste_Image.png

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

Paste_Image.png

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

• 使用雪碧图的好处是什么？
  1.因为多图合成为了一张图，所以减少了网页图片的请求，加快了网页的加载速度；
  2.可以重复使用；

---

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

类似效果图

1.首先，我们需要一些小图片，可以在阿里巴巴的iconfont里面下载到这些图片

搜索图片

下载素材

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

小图片

3.然后网上搜索一下雪碧图合成网站，个人推荐雪碧图合成，使用方式如下图：

网站使用方式

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

得到链接

链接长这样

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

列表代码

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

添加雪碧图进背景

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

设置li的样式

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

设置雪碧图偏移量

PS：设置不准偏移量的可以在开发者工具中慢慢调整；

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

这样就完成了我们的雪碧图列表了