收藏我写的文章的你同时希望大家关注“清秀的蜜蜂尖端”。 因为这些文章都是连载的，是我系统总结的。

【技术水平】初级

【接受报道】《CSS背景属性实战，灵活使用background属性，原来如此简单》

本文清楚的蜜蜂老师将详细介绍图像精灵(CSS Sprite )的使用。 本文是前端开发的初级教程，适合刚开始接触CSS技术的学习者。

另一方面，什么是图像向导？

一个网站上，照片是不可缺少的。 除了用于展示的大图像以外，还可能包含大量图标。 这些图标一般都很小，大多是成套制作的，有时会多次使用一个图标。

每次将图标加载到页面时，都必须向网站的服务器发送Http请求。 如果能够减少页面的Http请求次数，就可以加快网页的显示速度(当然，网页的显示速度与很多因素有关)。

基于这些理由，我们想到的解决办法如下。

将网站中用到的所有图标都做到一张大图片之中，在需要显示图标的位置处，利用CSS的background-image属性加载这个大图片，再利用background-position属性定位需要显示的图标的具体位置。

这就是CSS精灵的使用理由和结构。 下图显示了搜狐网的精灵图。 如下所示。

搜狐网站向导图示例

那么，如何制作这张大照片呢？ 如何使用CSS属性实现这个功能？ 清秀的蜜蜂老师教我们一步一步地完成照片精灵技术的使用。

二、第一步：制作向导地图。

我们把原理中提到的载有所有图标的大图像称为“向导地图”。 为了使向导贴图图标可以在不同的背景下使用，典型的向导贴图必须是背景透明的png格式的图像。

可以使用Adobe Photoshop软件创建精灵图像。

创建精灵图像时，请对齐每个图标，以便所有图标都铺在精灵图像上。 上次保存时，可以在Photoshop中保存以下内容：

“文件”菜单为Web和设备保存

选择上述命令后，Photoshop将弹出下图所示的窗口。

为Web和设备存储的格式

在此窗口中：选择png-24，选中“透明度”，然后单击“保存”。 可以将背景另存为透明的png格式的图像。

第三、二步：获取向导地图上所需图标的数据。

例如，需要将向导映射图标加载到div/div容器中。 那么，我需要知道这个图标的以下数据。

图标大小：包括图标的宽度和高度。

图标在向导地图中的位置。 包含向导图中图标的水平坐标和垂直坐标。

图标的大小大多很简单。 因为图标是设计师自己设计制作的，所以从一开始就知道图标的尺寸。

那么，如何知道图标在向导地图上的位置呢？ 这需要Photoshop的信息面板。

使用信息面板获取向导地图中图标的坐标

在Photoshop中打开信息面板有多种方法。

窗口菜单|信息。

使用快捷键： F8

显示光标位于信息面板的x和y处的坐标。 只要将光标放在所需图标的左上角，就可以从面板的x和y后面的数据中知道图标在精灵中的位置。

第四、三步：利用CSS加载向导地图图标。

HTML文档有一个div/div标签对，该标签对的id属性的值为box。 此标记对显示宽200px、高50像素的图标。 在Photoshop中测量时，该图标在向导地图上的坐标为X:140、Y:52。 假设向导地图位于站点根目录的images文件夹中，文件名为sprite.png。 下面的CSS代码允许将图标加载到该div/div标签对中。

div id=“盒子”/div

# # box {2}

width:200px； height:50px；

后台图像3360 URL (. /图像/剥离. PNG )；

后台定位：-140 px-52px；

}

/p>

为什么这样书写就可以得到这个图标呢？

首先，容器的宽度和高度限制了只能显示精灵图片中200px*50px大小的一个区域，并不能完全显示精灵图的全部内容。

其次，background-position 属性用于表示背景图片在容器中的位置。为什么是负值呢？请仔细看下图。

图片精灵的原理

我们很容易看到，选择负值，相当于精灵图的位置在容器的外部，所以指定位置的图标就显示在容器中了。

文章预告

下一篇文章中，清秀的小蜜蜂老师会继续为大家向下讲解CSS属性。下一次我们讲解列表属性。对于渴望在前端开发道路上前进的你一定不能错过！

清秀的小蜜蜂教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将清秀的小蜜蜂老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

清秀的小蜜蜂声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费清秀的小蜜蜂老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“清秀的小蜜蜂前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

关注“清秀的小蜜蜂前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。