在前端的页面中，网页上面的每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器，降低页面的加载速度，难免会用到许多的图片，如果每一个位置的图片都需要一张张的图片，那样不仅会占用大量的空间，而且会降低网页的速度。为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。
css精灵图(sprite)(也叫雪碧图等)就是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点：
【1】减少http请求次数
【2】减少图片大小，提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度)
应用方面：
【1】静态图片，不随用户信息的变化而变化(通常在网站上以常态的形式存在)。
【2】小图片，图片容积比较小。
【3】对于img标签设置的内容性图片，是不能合并到雪碧图的，如果合并这些图片会影响页面可读性，语义化降低且可调整的范围小。
【4】对于横向和纵向都平铺的图片，也不能合并到雪碧图中。如果是横向平铺，只能将所有横向平铺的图合并成一张大图，只能竖直排列，不能水平排列;如果是纵向平铺，只能将所有纵向平铺的图合并成一张大图，只能水平排列，不能竖直排列。
这是精灵图：
HTML代码：
CSS代码：
@charset "utf-8";*{margin:0;padding:0;}ul li{list-style:none;} a{underline:none;}.fl { float: left;}.fr { float: right;}html{ font: 12px '宋体';}a { color: #000;}.top { background-color: #F7F7F7; height: 26px; border-bottom: 1px solid #D8D8D8;}.top_page { width: 970px; height: 26px; margin: 0 auto;}.top_page_l { line-height: 26px;}.top_page_r ul li { line-height: 26px; float: left; padding-right: 10px;}.top_page_r ul li s { width: 14px; height: 12px; background: url(sprite.png); display: inline-block; vertical-align: middle;}.logo { width: 970px; height: 98px; margin: 0 auto;}.logo_l { width: 200px; height: 55px; margin: 24px 0 19px 9px; background: url(sprite.png) -20px 0; text-indent: -1000em;}.logo_r { width: 530px; height: 42px; border: 1px solid #C9C9C9; margin-top: 29px;}.logo_r_content{ margin: 5px 5px 5px 4px;}.logo_r_searche { width: 418px; height: 28px; border: 1px solid #C9C9C9; color:#999999;}.logo_r_btn { width: 99px; height: 30px; color: white; background-color: #2F70D0;}.nav { width: 970px; height: 25px; margin: 0 auto; border-bottom: 2px solid #0266A3;}.nav li { padding: 0 15px 0 15px; font-size: 14px; line-height: 26px; float: left; font-weight: bold;}.nav li a { color: #0266A3;}.nav li:hover { background-color: #0266A3;}.nav li:hover a{ color: white;}.banner { width: 970px; height: 210px; margin: 0 auto; margin-top: 10px;}.subNav { width: 200px; height: 210px; margin-right: 11px;}.ad { width: 520px; height: 210px; background-color: yellow;}.message { width: 230px; height: 210px;}.subNav h2 { padding-left: 20px; height: 30px; line-height: 30px; font-size: 14px; font-weight: bold; background-color: #0266A3; color: white;}.subNav ul { background: #EBF0F6; height: 180px;}.subNav s { display: inline-block; width: 15px; height: 13px; background: url(sprite.png) -225px 0; vertical-align: middle;}.subNav li { font-size: 15px; padding-top: 11px; margin-left: 9px;}.subNav li a { padding-left: 15px;}.message_top { height: 95px; border: 1px solid #DDDDDD; background: #F7FAFF; margin-bottom: 21px;}.message_top s { display: inline-block; width: 40px; height: 40px; background: url(sprite.png) -250px 0 ; margin: 20px 10px 0 10px;}.message_top .fw { padding: 7px 0 0 18px; font-weight: bold;}.message_top .cheap { margin-top: 25px;}.message_bottom { height: 92px; background: #F7F7F7;}.message_bottom .findMessage { text-align: center; font-size: 14px; padding-top: 11px;}.message_bottom .phone { margin-top: 10px; text-align: center; color: #3F9CE0;}.message_bottom .phone s { display: inline-block; width: 14px; height: 17px; background: url(sprite.png) -225px -30px; vertical-align: middle;}.message_bottom .btn { width: 81px; height: 23px; background: url(sprite.png) -295px 0; margin-top: 9px; margin-left: 75px;} 效果图（选中都是精灵图的实现效果，全都是上面图片的展示出来）：
使用到的核心代码：background-image: url(sprite.png);---为sprites里的设置背景图像，引用了精灵图(sprite.png);background-position 属性---这是最关键的代码，图片定位,定位选择图片的位置，属性才可使用，所以图片大小，各个图片的位置要保存好一定的位置，可以使用Fireworks实现，通过一定的规则(间隙，间距，行高的等)整合到一张大的图片里，然后再通过CSS样式中“background-image”，“background- repeat”，“background-position”等基本样式进行处理，以便运用到网页中所需要的位置上。