日常开局，先上案例
以及实现百度相机功能
鼠标移动上去后
这两种实现是其实是同一种技术，原理为图片偏移
下面以相机为例： 让我们先准备这样一张图片，它包含了你所有需要的素材
可以通过ps或者截图软件测得下面蓝色的相机比上面白色的相机y轴低19px(实际偏移20px效果比较好）
我们需要做的就是当鼠标移动到该图片上时，将图片向下偏移19px，以显示蓝色图片.
首先创建一个div标签
<div class="div"></div>
之后便可以在style中对div的样式进行设定
1：div标签的面积大小应以一个小相机图片的面积大小差不多一致,并消除边框
.div{
width:19px;
height:19px;
margin:100px auto;
background-image:url(camera.png);
border:none;
}
这时网站的显示:
那么最开始的显示已经完成了，接下来就是利用选择器中的伪类进行设置了,当鼠标移动到相机上时，相机沿y轴向下偏移19px
.div:hover{
cursor:pointer;
background-position:0 -20px;(这里实际发现偏移20px效果比较好,喜欢跳动效果可以偏移21px)
}
这样当鼠标移上去时，相机就会“变蓝”啦
至于此图
则找一张有所有素材的图片，然后根据文字间的边距设置偏移量一一对应就行啦。
这种技术大大方便了网站取用图片的过程，若是分割开来一张张图片的使用和替换则以上图片便需要存储五次，取用五次.而使用精灵图技术只需要存储一次即可.
cs
