CSS使用 精灵图 的方法：首先使用background -i mage属性导入精灵图；然后 利用 background-re PE at:no-repeat设置图像不重复；最后使用background-pos IT ion属性设置图像初始位置，进行精确定位。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
CSS sprite 是什么 ？
CSS S PR ite直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”或“CSS贴图定位”，是一种网页图片应用处理方式。其实就是把多张小图片整合到一张图片中去，再利用CSS的“ background-image ”，“ background-repeat ”，“ background-position ”进行背景定位， background-position 可以用数字能精确的定位出背景图片在布局 盒子 对象位置。
优点：
减少网页http请求，加快页面加载速度， 提高 页面的性能(适合小图)。
比如页面上使用到很多icon的图，如果页面一张张去请求这些图片的时后那http请求就会很多，这时候把这些图片合并为一张的话，页面就只需要加载一次了，减少了http请求带来的性能消耗。如下图：
图片整合原则：
边切图边整合。
定位时避免使用bottom,right等，用具体的数值，为了避免当你的 宽 度或高度上扩展sprites图时出现位置的错误。
将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。
单张整合好的sprite图片在100KB以内。
按分类整合图片。
为了方便计算 尺寸 ，一般情况会将sprites图的坐标计算成整数倍。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<title>sprite精灵图使用</title>
<style type="text/css">
ol, ul ,li{list -s tyle:none};
body, p, ul, li {m arg in:0; padding:0;}
ul li {
float: left;
background-color: # 63caac;
color: #fff;
padding: 5px 10px;
mar gin -right: 10px;
}
li:hover{background-color:#347764;}
ul.sprite li span{dis play : block;}
ul.sprite li span.l1{background-position:0 0;}
ul.sprite li span.l2{background-position:-64px 0;}
ul.sprite li span.l3{background-position:-128px 0;}
ul.sprite li span.l4{background-position:-192px 0;}
ul.sprite li span{width:64px;padding -t op:5px;h ei ght:64px;overflow:hidden;background:url( img .png) no-repeat;}
</style>
</head>
<body>
<ul class="sprite">
<li><span class="l1"></span></li>
<li><span class="l2"></span></li>
<li><span class="l3"></span></li>
<li><span class="l4"></span></li>
</ul>
</body>
</html>推荐学习：《css视频教程》
以上就是CSS如何使用精灵图的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 CSS如何使用精灵图 全部内容，希望文章能够帮你解决 CSS如何使用精灵图 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。