一张图片的妙用（相当实用哦）

web开发中经常要用到的效果就是鼠标翻转，比如鼠标没有移上去时，是一个样子，鼠标移上去时就将图片高亮显示。这种操作很容易实现，鼠标over时换一个样式，out时又换回原来的样式就ok了，而在两个样式中定义不同的背景图片就可以了。不过，在第一次将鼠标移上去时，因为需要加载一张原来不存在的图片，就需要新加载一幅图片。在某些时候，由于网络的原因，可能会出现需要等待几秒才能显示图片，或者图片在切换时引起一些闪动，都会给用户带来不好的体验。

以前也做过一些相应的技巧处理。最常规的办法就是对图片进行预加载。在鼠标移上去的时候，图片已经下载下来了，从而可以通过缓存直接访问到图片，而不用再次发起一次请求。这样做当然能让前面那几个问题迎刃而解。

不过，事情可以处理得更漂亮一些，flickr就这么做了。在选择要上传的图片以后，flickr会将选择的图片以列表形式展开，列表右边有一个小垃圾箱的标志，用来表示删除此图片而不上传。当鼠标以上去的时候，图片颜色会加深一些。按照常规，这应该会发起一次新的请求，不过通过firebug的net来看，并没有什么新的请求产生。再通过对其css样式的分析，发现竟然使用了同一张图片，当鼠标移上去的时候，只不过将图片挪动了一下位置，从而展示出另一番效果而已。不妨来看看：

 

鼠标没有移上去是，background-position为0px 50%，而鼠标移上去是，background-position变成了-10px 50%，从而将另外一半图片显示出来。这种做法，无异于对用户进行了一次小小的魔术表演，用他们非常简单的手法演绎出非常精美的变换。

总结来说，其实都是通过background-position这个属性来设定背景图片的位置，而又总是只让图片展示一部分内容，从而实现不同的展示效果。一方面，将多张图片浓缩到一张图片来说，因为图片颜色值的相近和图片的压缩技术，肯定能比原来的多张图省去一些存储空间，也更加便于对图片进行有效的管理。另一方面，能将对服务器的几次请求减小到一次，从而有效地减轻服务器的负担。有这样的一件好事，何乐而不为呢？