首页 | 站长免费中心 | 新手上路 | 网站运营 | 网页制作 | 图片设计 | 动画设计 | 网页编程 | 网页特效 | 本站专题 | 虚拟主机 | 域名注册 | 网站建设 | 程序下载
       免费空间资源 | 新闻咨询 | 免费域名 | 免费网盘 | 网站推广 | 网站策划 | 建站经验 | 网站优化 | 网页代码 | 源码下载 | 音乐小偷 | 网络赚钱 | 论坛交流
网站建设
网站建设
虚拟主机
虚拟主机
域名注册
域名注册
711网络首页
站长工具
站长工具
网站源码
网站源码
站长论坛
站长论坛

 711网络 网页制作CSS教程

CSS高级技巧:CSS Sprites

来源: 互联网    日期:2006-4-20
 

上一篇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="Item 5">&nbsp;</a></li>
    <li><a id="item6" href="#" title="Item 6">&nbsp;</a></li>
    <li><a id="item7" href="#" title="Item 7">&nbsp;</a></li>
    <li><a id="item8" href="#" title="Item 8">&nbsp;</a></li>
    <li><a id="item9" href="#" title="Item 9">&nbsp;</a></li>
</ul>

CSS代码:

ul { width:300px; height:300px; margin:0px auto; padding:0px; overflow:hidden; background:transparent url(02.jpg)}
li {list-style-type:none; width:100px; height:100px; float:left}
li a { display:block; width:100px; height:100px; text-decoration:none;
background:transparent url(01.jpg) no-repeat 500px 500px; }
a#item1:hover {background-position: 0 0; }
a#item2:hover {background-position: -100px 0;}
a#item3:hover {background-position: -200px 0;}
a#item4:hover {background-position: 0 -100px;}
a#item5:hover {background-position: -100px -100px;}
a#item6:hover {background-position: -200px -100px;}
a#item7:hover {background-position: 0 -200px;}
a#item8:hover {background-position: -100px -200px;}
a#item9:hover {background-position: -200px -200px;}

效果图如下:

有人要问了, 这有什么用么? 这可以模拟图片热区说明, 地图提示 等等...

Tips:

CSS Sprites需要精确的背景图片定位, 比较让人头疼.

相对于减少了多次HTTP请求的优点, 却增加了一次性一个大的HTTP请求的缺点... 自己权衡吧

下一篇CSS教程文章:CSS高级技巧:图片替换



更多的CSS高级技巧:CSS Sprites请到论坛查看: http://BBS.TC711.COM



【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源: 互联网    日期:2006-4-20   

发 表 评 论
查看评论

  您的大名:
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
认证编码: 刷新验证码
点评内容: 字数0
  精品推荐  
  本月推荐  
  友情赞助  

关于我们 | 联系我们 | 广告投放 | 留言反馈 | 免费程序 | 虚拟主机 | 网站建设 |  网站推广 |  google_sitemap baidu_sitemap RSS订阅
本站所有资源均来自互联网,如有侵犯您的版权或其他问题,请通知管理员,我们会在最短的时间回复您
Copyright © 2005-2015 Tc711.Com All Rights Reserved 版权所有·711网络   蜀ICP备05021915号
110网监备案 信息产业备案 不良信息举报