使用background和background-position在同一张图片中调用不同图标

在网站前端开发经常遇到需要使用图片或图标作为整个网页或某个区域的背景图，如果在同一个网页中使用多个小图标往往会因为加载过多图片页影响网页打开速度。这个时侯一般都将同一个网页中需要使用的多个图标放到同一个图片里面再通过background和background-position来调用读取一张图片中的不同图标。

如我在制作返回顶部及其相关组件，如图四个按钮加上鼠标经过时总共就是8个图标。如果使用8个小图标的话，网页加载时会加载8次图片。而使用background和background-position的话可以将8个小图标放到一张图片里，网页加载时就只需要加载一次图片。而加载8次1K的图片效率和加载1次8K的图片效率是后者高很多。下面就详细介绍一下我制作下图所示的详细说明。

首先：将需要使用的图片放到一个文件里面。如下图所示，其实背景是透明的，为了方便看到才加了个黑底。

接着：html部分，在前端html文件中的body中间放置四个元素。一个公共样式用来定义相同的样式部分，另一个样式来区分不同的样式部分。

<div class="totop qcm"></div>
<div class="totop feek"></div>
<div class="totop share"></div>
<div class="totop top"></div>

再来：CSS样式部分，先写一个totop样式来定义元素样式相同的部分，如定位、边框、背景颜色、调用的背景图片等。其它的就不介绍，只介绍一下background，四个元素所使用的背景图标都是在同一个图片里面，我这里的相对样式文件的路径为“../images/totop.png”，故直接定义一个背景图片“background:url('../images/totop.png') no-repeat;”，这表示这四个元素都是使用同一个图片为背景图片，再针对每一个元素写一个不同的样式，如我上面top样式，使用background-position定义调用图片的位置“background-position:3px 2px;”同样设置top的鼠标经过时调用的图片位置与其它几个元素与鼠标经过时的调用图片位置。

.totop {
    border-radius:50%;
    position:fixed;
    background-color:#fff;
    right:10px;
    z-index:999;
    cursor: pointer;
    overflow:hidden;
    border: 1px solid #bfbfbf;
    width: 40px;
    height: 40px;
    line-height:40px;
    text-align: center;
    text-decoration:none;
    background:url('../images/totop.png') no-repeat;
}
.top:hover{background-position:3px -30px;}
.top{
    background-position:3px 2px;
    bottom:30px;
    animation:topmove 0.5s infinite;
    -webkit-animation:topmove 0.5s infinite; /*Safari and Chrome*/
    animation-iteration-count:1;
    -webkit-animation-iteration-count:1; /* Safari 和 Chrome */
}
.qcm{bottom:75px!important;background-position:-29px 2px;}
.qcm:hover{background-position:-29px -28px;}

.feek{bottom:120px!important;background-position:-59px 2px;}
.feek:hover{background-position:-59px -28px;}

.share{bottom:165px!important;background-position:-89px 2px;}
.share:hover{background-position:-89px -28px;}

@keyframes topmove
{
from {bottom:10px;}
to {bottom:30px;}
}

我这里的代码还对top设置了一个动画效果，可以无视。主要是熟悉下background与background-position的使用，而这个position值是根据图片的位置来定的，根据图片中需要的图片位置而定。