应用场景#
页面中会经常使用一些小图标用于提示等功能,这样可以使页面更加美观.如果每个图标都做成单张图片,而且因为浏览器发送多次请求,一次次地从服务器上下载图片.这样会给服务器增加不必要的压力.
如果将这些小图标都放在一张图片上,这样只需要一次下载,需要时也可以用随时将图标从图片上"抠"出来.
操作步骤#
这张图片上已经有了各种图标
- 在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"> </span>
- 得到"√"图标
<span id="v1" class="true showImg"> </span>
