京涛老师

京涛老师

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

京涛老师

京涛老师分享 CSS Sprites

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

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

0