1. 模仿百度效果

百度的网站是每当鼠标放在相机图标那个位置的时候，相机就会切换到蓝色：

我们来模仿一下这个效果：

运行结果：

可以看到，只要改变一下背景图的位置，就可以切换到另一个不同的图标，只要位置控制得当，一张雪碧图就可以显示出各式各样不同的图标，是不是很神奇呢？

2. 更加直观的理解

如果有些同学并没有能够理解的话，我们可以给背景加上一个过渡动画，方便大家理解究竟是如何切换图标的：

运行结果：

可以看到其实就是这么个原理，两张形状一样但颜色不一样的图形放在一张雪碧图中，然后再控制位置即可。

3. 小结

就是在页面上加入了这么一个动态的效果，页面才不会显得那么平静如水。

有趣的交互效果能让你的页面熠熠生辉、锦上添花。

但并不是所有雪碧图的尺寸都能这么完美的贴合元素，下一小节我们将告诉大家应该如何调节背景图片的大小以适应页面元素。