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

浏览数：40 / 时间：2015年06月09日

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： des class style log com 代码 使用 src http des class style log com 代码 使用 src http

相关文章

随机文章

您可能还喜欢

您可能还喜欢