CSS精灵图技术

日常开局，先上案例

以及实现百度相机功能

鼠标移动上去后

这两种实现是其实是同一种技术，原理为图片偏移

---

下面以相机为例： 让我们先准备这样一张图片，它包含了你所有需要的素材

可以通过ps或者截图软件测得下面蓝色的相机比上面白色的相机y轴低19px(实际偏移20px效果比较好）

我们需要做的就是当鼠标移动到该图片上时，将图片向下偏移19px，以显示蓝色图片.

首先创建一个div标签

<div class="div"></div>

之后便可以在style中对div的样式进行设定
1：div标签的面积大小应以一个小相机图片的面积大小差不多一致,并消除边框

.div{
width:19px;
height:19px;
margin:100px auto;/*上下距外边距100px，自动居中*/
background-image:url(camera.png);
border:none;/*消除边框*/
}

这时网站的显示:

那么最开始的显示已经完成了，接下来就是利用选择器中的伪类进行设置了,当鼠标移动到相机上时，相机沿y轴向下偏移19px

.div:hover{
cursor:pointer;/*设置手型*/
background-position:0 -20px;(这里实际发现偏移20px效果比较好,喜欢跳动效果可以偏移21px)
}

这样当鼠标移上去时，相机就会“变蓝”啦

至于此图

则找一张有所有素材的图片，然后根据文字间的边距设置偏移量一一对应就行啦。

这种技术大大方便了网站取用图片的过程，若是分割开来一张张图片的使用和替换则以上图片便需要存储五次，取用五次.而使用精灵图技术只需要存储一次即可.