[p]1.CSS Sprite 简介 CSS http://baike.baidu.com/view/15916.htm Sprite 在国内很多人叫 css http://baike.baidu.com/view/15916.htm 精灵 http://baike.baidu.com/view/49189.htm , 是一种网页图片应用处理方式. 它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去, 这样一来, 当访问该页面时, 载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 对于当前网络流行的速度而言, 不高于 200KB 的单张图片的所需载入时间基本是差不多的, 所以无需顾忌这个问题.
加速的关键, 不是降低质量, 而是减少个数. 传统切图讲究精细, 图片规格越小越好, 重量越小越好, 其实规格大小无所谓, 计算机统一都按 byte http://baike.baidu.com/view/44243.htm 计算. 客户端 http://baike.baidu.com/view/930.htm 每显示一张图片都会向服务器发送请求. 所以, 图片越多请求次数越多, 造成延迟的可能性也就越大.
2.CSS Sprite 原理 CSS Sprite 其实就是把网页中一些背景图片整合到一张图片文件中, 再利用 CSS 的 "background-image","background- repeat","background-position" 的组合进行背景定位, background-position 可以用数字能精确的定位出背景图片 http://baike.baidu.com/view/950110.htm 的位置.
3.CSS Sprite 优缺点
a. 利用 CSS Sprite 能很好地减少了网页的 http 请求, 从而大大的提高了页面的性能, 这也是 CSS Sprite 最大的优点, 也是其被广泛传播和应用的主要原因;
b.CSS Sprite 能减少图片的字节, 曾经比较过多次 3 张图片合并成 1 张图片的字节总是小于这 3 张图片的字节总和.
c. 解决了网页设计 http://baike.baidu.com/view/8972.htm 师在图片命名上的困扰, 只需对一张集合的图片上命名就可以了, 不需要对每一个小元素进行命名, 从而提高了网页的制作效率.
d. 更换风格方便, 只需要在一张或少张图片上修改图片的颜色或样式, 整个网页的风格就可以改变. 维护起来更加方便.[/p][p]诚然 CSS**Sprite 是如此的强大, 但是也存在一些不可忽视的缺点, 如下:**
I. 在图片合并的时候, 你要把多张图片有序的合理的合并成一张图片, 还要留好足够的空间, 防止板块内出现不必要的背景; 这些还好, 最痛苦的是在宽屏 http://baike.baidu.com/view/300568.htm , 高分辨率的屏幕下的自适应页面, 你的图片如果不够宽, 很容易出现背景断裂;
II.CSS Sprite 在开发的时候比较麻烦, 你要通过 photoshop http://baike.baidu.com/view/2929.htm 或其他工具测量计算每一个背景单元的精确位置, 这是针线活, 没什么难度, 但是很繁琐; 幸好腾讯 http://baike.baidu.com/view/1591.htm 的鬼哥用 ADOBE AIR 开发了一个
, 虽然还有一些使用上的不灵活, 但是已经比 photoshop 测量来的方便多了, 而且样式直接生成, 复制, 拷贝就 OK!
III.CSS Sprite 在维护的时候比较麻烦, 如果页面背景 http://baike.baidu.com/view/7105320.htm 有少许改动, 一般就要改这张合并的图片, 无需改的地方最好不要动, 这样避免改动更多的 css http://baike.baidu.com/view/15916.htm , 如果在原来的地方放不下, 又只能 (最好) 往下加图片, 这样图片的字节就增加了, 还要改动 css.
CSS**Sprite 非常值得学习和应用, 特别是页面有一堆 ico(图标). 总之很多时候大家要权衡一下利弊, 再决定是不是应用 CSS**Sprite.
4.CSS**Sprite 的使用有几篇关于 CSS Sprite 的文章, 基本上把其原理和机制说明得很清楚.
What Are CSS Sprite?
How to create CSS Sprite
Creating Rollover Effects with CSS Sprite
Building a Dynamic Banner with CSS Sprite
High Performance web Sites 中关于 CSS Sprite 的内容 3.2. CSS Sprite
5.CSS Sprite 的例子 **.bg_sprite{background-image:url(/ 整图地址); background-repeat:no-repeat}
引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..
ico1 {width: 容器大小; height: 容器高度; background:-position:X 坐标 Y 坐标}
ico2 {width: 容器大小; height: 容器高度; background:-position:X 坐标 Y 坐标}
ico3 {width: 容器大小; height: 容器高度; background:-position:X 坐标 Y 坐标}
.nav {width: 容器大小; height: 容器高度; background:-position:X 坐标 Y 坐标}
必须要限定容器大小符合背景图元素位置 .. 另外 .. XY 轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚.[/p]
[p]由于 IE http://baike.baidu.com/view/703.htm 6 存在的 background 的 flicker 问题 IE6/Win, background image on , cache='check every visit': flicker!, 有人针对此问题提出了解决方案 Fast Rollovers Without Preload
关于 IE6 http://baike.baidu.com/view/476980.htm 的 flicker 问题, fivesevensix 上有一篇很不错的研究文章 Minimize Flickering CSS Background Images in IE6
另外: brunildo 的 CSS tests and experiments 是关于 css http://baike.baidu.com/view/15916.htm 各种功能不错的参考手册和测试工具.[/p]
来源: http://www.qdfuns.com/article/12018/48ba94665b4ad90ec62b82afc5ab4d43.html