码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-30 17:37:31      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

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

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

标签:

原文地址:http://www.cnblogs.com/kgdxpr/p/4469297.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!