一、什么是精灵技术

css精灵图技术（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

二、产生的原因

很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。

CSS Sprites技术加速的关键，并不是降低质量，而是减少个数，当然随之而来的增加内存消耗，CSS Sprites图片繁琐的合成等缺点在网站性能的提升前就显得微不足道了。

三、作用

1、减少加载网页图片时对服务器的请求次数

可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。

2、提高页面的加载速度

sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。

3、减少鼠标滑过的一些bug

IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS精灵技术，由于一张图片即可，所以不会出现这种现象。

四、使用方法

1、方法解释

通过将多个图片融合到一张图片文件中，使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非标签。

在需要用到图片的时候，通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

2、举例

（1）、简单例子

通过使用 CSS，我们可以仅显示所需图像的某个部分。

<!DOCTYPE html>
<html>
<head>
<style>
#home {width: 46px;height: 44px;background: url(/i/css/navsprites.gif) 0 0;
}#next {width: 43px;height: 44px;background: url(/i/css/navsprites.gif) -91px 0;
}
</style>
</head>
<body><img id="home" src="/i/css/trans.gif" width="1" height="1">
<img id="next" src="/i/css/trans.gif" width="1" height="1"></body>
</html>

解释：

<img id="home" src="trans.gif"> - 仅定义小的透明图像，因为 src 属性不能为空。而实际显示的图像将是我们在 CSS 中指定的背景图像。
width: 46px; height: 44px; - 定义我们要使用的图像部分
background: url(navsprites.gif) 0 0; - 定义背景图片及其位置（left 0px, top 0px）

（2）、导航列表例子

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {position: relative;
}#navlist li {margin: 0;padding: 0;list-style: none;position: absolute;top: 0;
}#navlist li, #navlist a {height: 44px;display: block;
}#home {left: 0px;width: 43px;background: url('/i/css/navsprites.gif') 0 0;
}#prev {left: 63px;width: 42px;background: url('/i/css/navsprites.gif') -47px 0;
}#next {left: 129px;width: 42px;background: url('/i/css/navsprites.gif') -91px 0;
}
</style>
</head>
<body><ul id="navlist"><li id="home"><a href="/css/index.asp"></a></li><li id="prev"><a href="/css/css_jianjie.asp"></a></li><li id="next"><a href="/css/css_syntax.asp"></a></li>
</ul></body>
</html>

解释：

#navlist {position:relative;} - 位置设置为相对，以允许在其中进行绝对定位
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 外边距和内边距设置为 0，删除 list-style，并且所有列表项都均为绝对定位
#navlist li, #navlist a {height:44px;display:block;} - 所有图片的高度均为 44px

现在开始为每个特定部分设置定位和样式：

#home {left:0px;width:46px;} - 一直向左定位，图像宽度 46px
#home {background:url(navsprites.gif) 0 0;} - 定义背景图片及其位置（left 0px, top 0px）
#prev {left:63px;width:43px;} - 向右定位 63px（#home 宽度 46px + 项目之间的一些额外空间），宽度 43px。
#prev {background:url('navsprites.gif') -47px 0;} - 定义背景图片向右 47px（#home 宽度 46px + 1px 分隔线）
#next {left:129px;width:43px;} - 向右定位 129px（#prev 开始是 63px + #prev 的宽度是 43px + 多余的空格），宽度 43px。
#next {background:url('navsprites.gif') -91px 0;} - 定义背景图片向右 91px（#home 宽度 46px + 1px 分隔线+ #prev 宽度 43px + 1px 分隔线）

（3）、悬停效果举例

#home a:hover {background: url('/i/css/navsprites_hover.gif') 0 -45px;
}#prev a:hover {background: url('/i/css/navsprites_hover.gif') -47px -45px;
}#next a:hover {background: url('/i/css/navsprites_hover.gif') -91px -45px;
}

解释：

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 我们为所有三个悬停图像指定相同的背景位置，仅向下 45 像素。

（4）、缺点

精灵图虽然实现了缓解服务器压力以及用户体验等问题，但还是有一个很大的不足，那就是牵一发而动全身。如果需要改动页面，将会很麻烦。

CSS3精灵（Sprites）技术相关推荐

CSS Sprites（CSS精灵）技术及其优化经验分享
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.这个被国内开发者昵称为CSS精灵.CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊. 在大 ...
SVG Sprites技术介绍
一.Sprite技术这里所说的Sprite技术,没错,类似于CSS中的Sprite技术.图标图形整合在一起,实际呈现的时候准确显示特定图标. 另,本文图片甚多,爪机党继续浏览需慎重. 二.SVG S ...
html让图片位置固定缩放不改变为HI,CSS Sprites技术实现一张图片上很多小图片，分别定位到网页的不同位置...
之前,一直看到百度站长工具有个页面优化建议的功能,其中多次提到css Sprites这个词,当时也就是想到减少图片加载次数这个好理解,怎么做?却一直都没有去深思.今天偶然看到一个网站小图标都在一张背景 ...
一个大图切成几个小图加载速度更快_CSS精灵图技术（提高页面的加载速度）
未来2088 2019-11-28 18:00:00 哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! ...
不是css3新增的技术,CSS3中的5个有趣的新技术
脚本之家将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角.个别圆角.不透明度.阴影和调整元素大小. CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时 ...
CSS3学习笔记-技术提示
css书写过程中的优先级 (1)display 及相关声明: (2)position 及相关的声明: (3) margin.padding 和 border 及相关声明: (4)字体/文本相关声明: ...
不是css3新增的技术,css3新增属性有哪些？css3中常用的新增属性总结，分享
来提问这个问题的人都应该知道css3中常用的新增属性. 一.css3新增边框属性 1.css3新增属性之border-color:为边框设置多种颜色 % 这里说一下题外话,需要注意:"bor ...
div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程
div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图一.什么 ...
css sprite 按钮,CSS Sprites (CSS 精灵) 技术
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

CSS3精灵（Sprites）技术