精灵图

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

怎么使用css精灵图(sprite)？
css精灵图(sprite)其实就是通过将多个图片融合到一张图片文件中，使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非标签。
在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

使用精灵图的优点
1、减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
2、提高页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。
单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
3、减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。

目的：
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
本质：
CSS精灵图是一种处理网页背景图像的方式，它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来

 

.content{
width: 1000px;
margin: 0 auto;
}
.content h1{
color: #de4767;
text-align: center;
font-size: 44px;
font-weight: normal;/* 不加粗，字体变正常 */
}
.content ul{
padding-left: 0px;
text-align: center;
}
.content ul li{
display: inline-block;/* ul在一行 用浮动（float: ;）副元素会坍塌 */
height: 30px;
width: 80px;
background-image: url(../img/img/buyer/mod_circle.png);
background-position: center 5px;/* 显示哪一块区域 */
background-repeat: no-repeat;/* 背景图片不重复 */
}
.content ul li:hover{
background-position: center -95px;/* 切换图片 */
}
.content ul li a{
padding-top: 40px;
display: block;/* a标签是行内标签 display: block;是能让a标签设置宽高 */
text-decoration: none;
color: #333;
}
.content ul li a:hover{
color: #DE4767;
}

 

标签：sprite,精灵,content,background,CSS,图片
来源： https://www.cnblogs.com/su-wei-yi/p/15460144.html