1.CSS sprites技术： 是通过将图片合并到一个文件中来减少对图片资源发出的http请求数量的方法。 2.具体属性 子画面是二维图像，由在定义的X和Y坐标下将小图像组合成一个大图像组成。 要显示组合图像中的单个图像，可以通过使用CSS background-position属性，定义要显示的图像的确切位置 3.具体操作思路 第一：新建html文件，采用ul>li 里面包裹a导航，
<ul>
<li class="firfox"> <a href="#">firfox</a> </li>
<li class="chrome"> <a href="">chrome</a></li>
<li class="ie"><a href="">ie</a></li>
<li class="opera"><a href="">opera</a></li>
<li class="safari"><a href="">safari</a></li>
</ul>
第二步： 重置样式,设置里的大小及内边距
/* 第一步 重置样式,设置里的大小及内边距 */
ul.muen{
list-style-type: none;
}
ul.muen li{
padding: 5px;
font-size: 16px;
}
第三步：为每个链接设置通用属性
ul.muen li a {
height: 50px;
line-height: 50px;
display: inline-block;
/* 这个是给左边背景图片的 */
padding-left: 60px;
background-image: url(mySprite.png);
}
第四步：设置每个链接的默认状态： Firefox图标位于图像精灵的起点即左上角，因此不需要移动背景图像。因此，在这种情况下背景的垂直和水平位置将为0。类似地，您可以为图像精灵内的其他图标定义背景位置
ul.muen li.firfox a{
background-position: 0 0;
}
/* 第2个从0 -100开始 */
ul.muen li.chrome a{
background-position: 0 -100px;
}
ul.muen li.ie a{
background-position: 0 -200px;
}
ul.muen li.opera a{
background-position: 0 -300px;
}
ul.muen li.safari a{
background-position: 0 -400px;
}
第五步：设置一个悬停状态的垂直位置 = 正常状态下的垂直位置 - 50px
由于鼠标悬停图像刚好在默认状态之下，因此每个图标的高度均等于50px。图标的悬停状态也不需要水平偏移，因为在图标的左上角之前没有像素。
/* 这个是悬停状态的 */
ul.muen li.firfox a:hover{
background-position: 0 -50px;
}
/* 第2个从0 -100开始 */
ul.muen li.chrome a:hover{
background-position: 0 -150px;
}
ul.muen li.ie a:hover{
background-position: 0 -250px;
}
ul.muen li.opera a:hover{
background-position: 0 -350px;
}
ul.muen li.safari a:hover{
background-position: 0 -450px;
}
以下是整个的程序
<!-- html5 声明 必须要用 -->
<!DOCTYPE html>
<html lang="ch">
<head>
<!-- 网页编码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="德龙科技,智能照明,施耐德knx,物联网4G">
<meta name="description" content="掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货,其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时,掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户,我们相信你也可以在这里有所收获。">
<style>
</style>
<title>精灵图</title>
<style>
ul.muen{
list-style-type: none;
}
ul.muen li{
padding: 5px;
font-size: 16px;
}
ul.muen li a {
height: 50px;
line-height: 50px;
display: inline-block;
/* 这个是给左边背景图片的 */
padding-left: 60px;
background: url(mySprite.png) no-repeat ;
}
/* 第一个从0 0 开始 */
ul.muen li.firfox a{
background-position: 0 0;
}
/* 第2个从0 -100开始 */
ul.muen li.chrome a{
background-position: 0 -100px;
}
ul.muen li.ie a{
background-position: 0 -200px;
}
ul.muen li.opera a{
background-position: 0 -300px;
}
ul.muen li.safari a{
background-position: 0 -400px;
}
/* 这个是悬停状态的 */
ul.muen li.firfox a:hover{
background-position: 0 -50px;
}
/* 第2个从0 -100开始 */
ul.muen li.chrome a:hover{
background-position: 0 -150px;
}
ul.muen li.ie a:hover{
background-position: 0 -250px;
}
ul.muen li.opera a:hover{
background-position: 0 -350px;
}
ul.muen li.safari a:hover{
background-position: 0 -450px;
}
</style>
</head>
<body>
<ul class="muen">
<li class="firfox"> <a href="#">firfox</a> </li>
<li class="chrome"> <a href="">chrome</a></li>
<li class="ie"><a href="">ie</a></li>
<li class="opera"><a href="">opera</a></li>
<li class="safari"><a href="">safari</a></li>
</ul>
</body>
</html>
