从单张图片截取图标

应用场景#

页面中会经常使用一些小图标用于提示等功能,这样可以使页面更加美观.如果每个图标都做成单张图片,而且因为浏览器发送多次请求,一次次地从服务器上下载图片.这样会给服务器增加不必要的压力.
如果将这些小图标都放在一张图片上,这样只需要一次下载,需要时也可以用随时将图标从图片上"抠"出来.

操作步骤#

这张图片上已经有了各种图标

• 在css中声明class

.showImg{
background:url(../images/webImg/ico.jpg) no-repeat;//图片的路径
  18px;
height: 18px;//指定每个图片的大小
}

• 定位图片中的"√",x轴方向4个像素,y轴方向5个像素.就能得到."-"没有正负的意思

.true{
background-position:-4px -5px;
}

• 定位图片中的"×",x轴方向4个像素,y轴方向55个像素.

.false{
background-position:-4px -55px;
}

• 得到"×"图标

<span id="v1" class="false showImg">&nbsp;</span>

• 得到"√"图标

<span id="v1" class="true showImg">&nbsp;</span>