CSS Sprites技术

CSS Sprites简介

　　通常被意译为“CSS图像拼合”或“CSS贴图定位” 。CSS Sprites并不是一门新技术，当前它已经在网页开发中进展得较为成熟，阿里巴巴各子公司的网页中到处都可发现css sprites 的影子 。但CSS Sprites并不是什么 清规戒律，但在众多状况下，它有着 定然的优势，最主要的是它 可以减轻服务器的负载， 普及网页加载速度 。随着Web设计向着精巧、 奇妙的方向进展，设计师们开始考量 使用非Javascript的方 式制作鼠标滑过、悬停菜单的 动机，这时CSS Sprite应运而生 。
　　说白了，CSS Sprites其实便是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 可以用数字能准确的定位出背景图片的位置 。
　　当页面加载时，不是加载每个 径自图片，而是一次加载整个组合图片 。这是一个了不起的改良，它大大削减了HTTP 申请的次数，减轻服务器压力，同时缩小了悬停加载图片所需求的 工夫延迟，使 动机更流畅，不会停顿 。

CSS Sprites 利用

　　在这方面，淘宝网做的 比较好，我就以淘宝网为例吧 。

　　实例一：淘宝频道页面导航

　　 动机图：

　　实例二：淘宝首页

　　 动机图：

　　sprites图：

CSS Sprites 长处

　　CSS Sprites为何蓦地跑火，跟 可以 晋升网站性能有关 。明显，这是它的 硕大 长处之一 。

　　1.利用CSS Sprites能很好地削减了网页的http 申请，从而大大的 普及了页面的性能，这是CSS Sprites最大的 长处，也是其被 宽泛 流传和 利用的主要缘由；

　　2.个人认为CSS Sprites能削减图片的字节，我曾经 比较过 频繁3张图片合并成1张图片的字节总是小于这3张图片的字节总和 。

CSS Sprites缺陷

　　诚然CSS Sprites是如此的 壮大，然而也存在一些不可 忽视的缺陷 。

　　1.在图片合并的时候，你要把多张图片有序的 正当的合并成一张图片，还要留好只够的空间， 预防板块内不会浮现 毋庸要的背景，不然可能会浮现浮现 烦扰图片的状况；这些还好，做 苦楚的是在宽屏，高分辩率的屏幕下的自适应页面，你的图片假如不够宽，很方便浮现背景断裂；

　　2.CSS Sprites在开发的时候 比较麻烦，你要通过photoshop或 其余工具测量计算每一个背景单元的准确位置，这是针线活，没什么难度，然而很繁琐；不过网上已经有高手开发出“CSS Sprites  款式生成工具”，大家 可以尝试一下 。

　　3.CSS Sprites在 保护的时候 比较麻烦，sprites是普通双刃剑，假如页面背景有少许 改变，普通就要改这张合并的图片，无需改的地方最好不要动，这样幸免 改变更多的css，假如在原来的地方放不下，有不得不(最好)往下加图片，这样图片的字节就增加了，由于每次的图片 改变都得往这个图片删除或增加内容，显得略微繁琐，并且再一次算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的 事件 。固然，在性能的口号下，这些都是 可以克服的 。

　　4.由于图片的位置需求固定为某个绝对数值，这就失去了诸如center之类的灵便性 。

CSS Sprites总结
　　性能压倒 所有 。CSS Sprites十分值得学习和 利用，特殊是页面有一堆ico(图标) 。总之众多时候大家要 衡量一下利弊，在决定是否 利用CSS Sprites 。为 维持兼容性和 保护性，sprites图片中的各个 部分 维持 定然的 间隔是一种不错的做法 。