CSS Sprites并没有一个确定的中文翻译，通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟。CSS Sprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。
本文系统的介绍了CSS Sprites的概念、用途和用法，相信本文会解决你在使用CSS Sprites中遇到的大部分问题。
什么是CSS Sprites？
“Sprite”(精灵)这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要 同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。
Sprite被定位到一副静态图片上，并且通过简单的程序或硬件即可正确定位到画面上，一幅幅图片就像是被“变”出来的，他们并没有单独占用内存，所以被取名为“Sprite精灵”。
上图是口袋妖怪的组合图片，可以点这里欣赏更多。不是加载每个但以图片
时间进行到2000年，Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生，它基于同上文提到的游戏Sprite同样的原理，并且使用CSS更容易控制，很快的流行开来。
2004年，Dave Shea 提出了一种使用CSS控制组合图片的方案 ，将许过小的图片组合在一起，使用css定义背景属性，来控制图片的显示位置和方式。
当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
CSS Sprites用在哪里？
CSS Sprites可以用在很多场合，大型网站可以将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新。图片之间通常会留出较大的空白，使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目 的方式。
下面是一些CSS Sprites的使用范例：
Xing
这个网站将一些按钮、图标以及LOGO做成了CSS Sprites：
Amazon
亚马逊使用的大幅、整齐巧妙的CSS Sprites：
Apple
苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果：
YouTube
YouTube使用了一个2008像素高的CSS Sprites：
CNN
CNN使用了非常简单谨慎的方案：
Digg
Digg的方案比较复杂：
Yahoo
Yahoo将他们漂亮的图标等距离排布起来：
Google
Google使用了极其简化的方案：
Dragon Interactive
一个丰富多彩的CSS Sprites方案：
TV1.rtp.pt
一个很大很酷的CSS Sprites方案
CSS Sprites常用来合并频繁使用的图形元素，如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现，因为涉及内容的图片并不是每个页面都一样。
关于CSS Sprites的文章
CSS Sprites: Image Slicing’s Kiss of Death
中文版 http://www.liquidroc.name/post/my_view_on_css_sprites.html
最权威的CSS Sprites介绍文章之一
CSS Sprites: What They Are, Why They’re Cool And How To Use Them
一片图文并茂的介绍文章
How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites
介绍Yahoo、AOL等网站使用CSS Sprites降低服务器压力的案例。
What Are CSS Sprites?
又一片介绍文章
Sprite Optimization
Dave Shea的思考：是不是真的有必要简历复杂的大型CSS Sprites？答案是不！不要搞得太复杂，找到一个折中的方案才是正道。
Creating Easy and Useful CSS Sprites
一篇教程，其源文件可下载学习
Fast Rollovers Without Preload
一个快速翻转效果的例子
CSS Sprites + Rounded corners
另一个例子：使用CSS Sprites实现背景圆角
CSS Image Sprites
一篇教程
Optimize Your Website Using CSS Image Sprites
非常详细的教程，介绍了CSS Sprites的原理和应用方法。
Animated GIF For CSS Sprites
一个比较特别的应用
Image Sprite Navigation With CSS
怎样制作简单的悬停菜单效果
Advanced CSS Menu
还是悬停效果
Creating and Using CSS Sprites
一个非常基本的教程
CSS Sprites视频教程
How to Use CSS Sprites
David Perel解释了CSS Sprites的基本概念，并演示了如何在网页中使用它，长度：10分钟
Creating Rounded Buttons With CSS Sprites
继续上面的教程，展示了如何制作滑动按钮
Exactly How to Use CSS Sprites
Andres Fernandez 展示了 CSS sprites如何加快加载时间和减少请求次数
How To Use CSS Sprites
Chris Coyier 展示了一个 CSS sprites的范例，他将8幅图片组合在了一起，并且使用jQuery制作了一个小程序。
Faster Page Loads With Image Concatenation
对于复杂的网站，减少图片请求数量可以减轻服务器负担，这是许多站长所希望看到的。
CSS Image Sprites In 10 Minutes
另一个关于导航菜单的教程
CSS: Using Percentages in Background-Image
介绍背景图片定位的方法
利用CSS Sprites制作图像映射(image maps)
使用CSS Sprites，你可以对一个对象的一小部分加载翻转效果，使用负值的背景图片位置(background-position )，你可以创建基于CSS的图像映射，下面的文章讲述了这一技术：
CSS Image Maps Using Sprites
一个基于CSS的图像映射的简单例子。你可以同传统的方式对比一下优劣。
City Guide Map Using Sprites
另一个横向定位的例子
Advanced Map Using Sprites
一个更高级的技术。
CSS Sprites技术
margin-top: 5px; margin-right: 0px; margin-bottom: 5p
分享到：
相关推荐
程序名称：CSS Sprites 样式生成工具(bg2css) 主要功能：方便使用CSS Sprites时对图片生成样式 安装条件：需先安装Adobe的AIR环境AdobeAIRInstaller.exe，这个我也传到csdn空间了，可以搜索下！
CSS Sprites样式生成工具.zip
CSS Satyr（CSS 塞特斯）是一款 CSS Sprites 的小工具。可以将多个小图片整合成一张图片，并生成相应的CSS调用代码。支持批量添加图片/拖动排列/自动生成
CSS Sprites生成工具
CSS Sprites 样式生成工具(bg2css) 3.2.1 （需要AIR环境，可到 Adobe站点 下载安装。）
fis-spriter-csssprites 基于FIS的csssprites，对CSS文件，以及HTML文件CSS片段进行csssprites处理。支持repeat-x repeat-y ， background-position和background-size 使用 FIS内置 环境要求 依赖本地插件，环境需要...
CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，也就是CSS Sprites（图片合并）技术。
css sprites 、css精灵 、css整合小图片工具，可以把网站中的小图片整合成一张图片，减小服务请求次数
为您提供CSS Sprites Generator CSS Sprites生成工具下载，CSS Sprites Generator是一款CSS Sprites生成工具，用户只需要点击几下鼠标就可以非常容易地生成CSS Sprites。有效提高了设计师的页面加载效率，操作简单...
利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能 这是一个air环境，安装了之后就可以打开.air文件了
CSS Sprites 样式生成工具，准确定位输出图片的位置和大小
CSS Sprites适合新手学习，介绍了怎么将多张图片做成一张图片都，通过CSS来调用
CSS Sprites实例演示 CSS Sprites实例演示 CSS Sprites实例演示 CSS Sprites实例演示CSS Sprites实例演示 CSS Sprites实例演示
CSS Sprites技术bg2css_v3.2.1
AIR环境 配合 CSS Sprites 样式生成工具使用， （也可到 Adobe站点 下载安装。）64位系统使用升级的方式安装可能出现错误，如遇问题请删除旧版本再安装。
css satyr v1.2 免安装，用来拼接多个图片，带网格，自动生成代码
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
CSS Sprites Generator 雪碧图生成工具（官网：https://softpcapps.com/css-sprites-generator）
上一篇CSS教程文章：CSS高级技巧:圆角矩形 CSS Sprites, 利用CSS background-position 进行背景绝对定位, 减少HTTP请求, 加速网页显示, 解决图片载入闪动问题的技巧. CSS Sprites最适合用来做的, 恩, 比如: 清单...
CSS Sprites工作原理CSS Sprites工作原理