优点
1、减少网页的http请求，大大的提高页面的性；
2、减少图片的字；
3、解图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
缺点
1、在图片合并的时候，要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2、开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁
3、维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。
使用
有几篇关于CSS Sprites的文章，基本上把其原理和机制说明得很清楚。
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
0
0
CSS Sprites的优缺点与使用_html/css_WEB-ITnose
php中文网
发布时间：2016-06-24 12:06:12
|1300人浏览过
|来源于php中文网
原创
相关文章
如何通过按钮点击动态显示多个内容区块并实现独立计算功能
HTML5手机端空格错位怎么调_移动端适配空格的技巧【操作】
如何通过悬停切换元素并确保新元素可点击
如何在 Angular 中通过代码动态修改徽章（Badge）的颜色
如何开发html5应用_HTML5应用开发流程与实战技巧指南【教程】
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
