CSS雪碧,即CSS Sprite 简单的例子
CSS Sprite生成工具
http://pan.baidu.com/s/1gdGQwiJ
工具可将多幅图片整合一张,并生成CSS。
HTML代码
<style> .img{background:url(img.png) no-repeat;} .Lighthouse{height:768px;width:1024px;background-position:0 0;} .Koala{height:768px;width:1024px;background-position:0 -768px;} .Tulips{height:768px;width:1024px;background-position:0 -1536px;} .Penguins{height:768px;width:1024px;background-position:0 -2304px;} .Desert{height:768px;width:1024px;background-position:0 -3072px;} .Chrysanthemum{height:768px;width:1024px;background-position:0 -3840px;} .Jellyfish{height:768px;width:1024px;background-position:0 -4608px;} .Hydrangeas{height:768px;width:1024px;background-position:0 -5376px;} </style> <img class="img Hydrangeas" />
优点
▪ 减少加载网页图片时对服务器的请求次数
▪ 提高页面的加载速度
▪ 减少鼠标滑过的一些bug
不足
▪ CSS雪碧的最大问题是内存使用
▪ 影响浏览器的缩放功能
▪ 拼图维护比较麻烦
▪ 使CSS的编写变得困难
▪ CSS 雪碧调用的图片不能被打印
▪ 错误得使用 Sprites 影响可访问性
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步