CSS雪碧，即CSS Sprite 简单的例子

时间：2021-11-15 21:33:56

CSS Sprite生成工具

http://pan.baidu.com/s/1gdGQwiJ

工具可将多幅图片整合一张，并生成CSS。

CSS雪碧，即CSS Sprite 简单的例子

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 影响可访问性

相关文章