Hover 时，图片背景的集中处理

　　CSS 基础知识，高手请绕边。如上所示，要实现图片的鼠标 hover 事件，一般是为图片链接添加hover后的图片。如上图的 YouTube 标志效果。在图片的制作中一般要为每个图片链接添加两张图片，5个链接就要10张图片，这不仅细微的拖慢了页面的加载速度，在制作过程中也会有诸多不便，如图片的对齐问题，而将图片背景的集中处理是个很好的解决方案。

　　以上的效果背景图片为：

　　关键性的代码：
　　icon a{width:20px; height:20px; padding:0; background:url(social-icons.png) no-repeat;text-indent:-9999px; overflow:hidden;}
　　icon a:hover{background-position:0 -22px;}
　　twitter a{background-position:-20px 0;}
　　twitter a:hover{background-position:-20px -22px;}
　　flickr a{background-position:-40px 0;}
　　flickr a:hover{background-position:-40px -22px;}
　　facebook a{background-position:-60px 0;}
　　facebook a:hover{background-position:-60px -22px;}
　　. . . . . .
　　
　　关键的代码在于对 background-position 这个属性的操作，每个按钮对应不同的背景图片相应位置。

　　网站地址： Android and Me

© 2009-2010 huachahuacha.com 浙ICP备09092299号 sitemap
♨ SuperMini by unnerkrunt and nocreativity ❤ Wordpress