CSS高级技巧:CSS Sprites

上一篇CSS教程文章：CSS高级技巧:圆角矩形

CSS Sprites, 利用CSS background-position 进行背景绝对定位, 减少HTTP请求, 加速网页显示, 解决图片载入闪动问题的技巧.

CSS Sprites最适合用来做的, 恩, 比如:

• 清单导航的CSS鼠标翻转效果
• 大量小图标集中的应用 (FckEditor)
• ...很多很多,多的想不出来了.

实现原理简单地说就是控制容器的大小, 然后利用background-repeat, background-position来对背景图片进行定位. 更可以理解为将网站大量背景图整合到一张大图中的这种行为( 表象上 )

用一个鼠标翻转事件来说明吧:

准备:

   
                                           01.jpg                                                                                               02.jpg

HTML代码:

<ul>
    <li><a id="item1" href="#" title="Item 1">&nbsp;</a></li>
    <li><a id="item2" href="#" title="Item 2">&nbsp;</a></li>
    <li><a id="item3" href="#" title="Item 3">&nbsp;</a></li>
    <li><a id="item4" href="#" title="Item 4">&nbsp;</a></li>
    <li><a id="item5" href="#" title="I

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!