京涛老师

京涛老师

高级网络整合营销讲师-京涛老师博客

京涛老师

京涛老师分享 CSS Sprites

京涛老师 - admin - - View: 844 次

CSS Sprites本质上是把多张图片资源合并到一张图片上,减少资源请求所带来时间上的等待,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

What Are CSS Sprites?
How to create CSS sprites
Creating Rollover Effects with CSS Sprites
Building a Dynamic Banner with CSS Sprites
High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites编辑本段五、 CSS Sprite的例子  .bg_sprite{background-image:url(/整图地址); background- repeat:no-repeat}
引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..
#ico1 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
#ico2 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
#ico3 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
.nav {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚编辑本段六、CSS Sprites的问题  由于IE6
存在的background的flicker问题IE6/Win, background image on , cache=‘check every
visit’: flicker!,有人针对此问题提出了解决方案Fast Rollovers Without Preload
关于IE6的flicker问题,fivesevensix上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6
另外:brunildo的CSS tests and experiments是关于css各种功能不错的参考手册和测试工具。京涛老师给大家分享一款css sprites 工具,下载网址:

http://www.liuyaotao.cn/wenjian-add/CssSprites.rar

没有回复( 写评论 )