CSS高级技巧之CSS Sprites

日期：2008年6月14日作者：查看:[大字体中字体小字体]

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

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

　　清单导航的CSS鼠标翻转效果

　　大量小图标集中的应用 (FckEditor)

　　...很多很多,多的想不出来了.

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

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

　　准备:

　　

　　

　　HTML代码:

　　＜ul＞

　　＜li＞＜a id="item1" href="#" title="Item 1"＞ ＜/a＞＜/li＞

　　＜li＞＜a id="item2" href="#" title="Item 2"＞ ＜/a＞＜/li＞

　　＜li＞＜a id="item3" href="#" title="Item 3"＞ ＜/a＞＜/li＞

　　＜li＞＜a id="item4" href="#" title="Item 4"＞ ＜/a＞＜/li＞

　　＜li＞＜a id="item5" href="#" title="Item 5"＞ ＜/a＞＜/li＞

　　＜li＞＜a id="item6" href="#" title="Item 6"＞ ＜/a＞＜/li＞

　　＜li＞＜a id="item7" href="#" title="Item 7"＞ ＜/a＞＜/li＞

　　＜li＞＜a id="item8" href="#" title="Item 8"＞ ＜/a＞＜/li＞

　　＜li＞＜a id="item9" href="#" title="Item 9"＞ ＜/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;}
[1] [2] 下一页
CSS高级技巧之CSS Sprites 相关文章：
·电脑高手的140个电脑技巧
·电脑高手必备 Windows系统35招实用技巧
·修改Tcpip Window值提高网速大揭秘
·我所用的140个XP高级优化技巧！
·Photoshop高手必知技巧大全
·格言警句：志当存高远
·高级教师述职报告
·高潮点--G点(图)
·高效办公Excel排序方法
·设好eMule电驴两项关键配置提高下载速度
CSS高级技巧之CSS Sprites 相关软件
·跑跑卡丁车高手李光漂移教学视频合集
·战火兄弟连:进军30高地
·模拟人生之乐高服饰商店
·高清晰影楼相册制作系统 2008V3.0
·SD高达G世纪
·暗黑破坏神1.10完全版[高速下载]
·高达Seed D 原声大碟
·打字高手--文录教学鉴定系统 V8.3
·高达世纪－星际争霸特别版
·战地2 最新高清晰游戏演示

上一篇:Windows Server 2008 R2功能前瞻

下一篇:QQ2009 Preview 2 Trial 再次更新

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

CSS高级技巧之CSS Sprites

精品推荐

热点TOP10

特别推荐