为了减少服务器的请求次数，我们常常会将一些小图标全部放入一张大图里面，然后通过定位这张大图来找到小图，然后使用元素的CSS样式设置元素宽高，这样就从大图中取出了一小块。
下面我们通过代码来说明一下：
例如：一张背景图是这样的
假设我们要取出黄色的确定按钮图标，通过测量可以得知，黄色图标的顶边举例图片的顶边为190像素，距离左边为32像素。
下面我们为要显示图标的标签引入背景并定位背景图：
- background:url(img/bg2.png) -32px -190px;
第一个参数表示将背景图向左移动32像素，用负值。
第二个参数表示将背景图向上移动190像素，用负值。
然后测量一下该按钮的长宽
测量得知：按钮的长宽为77px，30px，所以我们将标签的长宽设置为77和30，这样就在页面中得到了这个按钮，如下：
以下把代码贴上：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>精灵图--从一张背景图片中取出指定的像素位置</title>
</head>
<style>
.box{
width:77px;
height:30px;
border:1px solid #000;
/* margin:0 auto; */
background:url(img/bg2.png) -32px -190px;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
精灵图附件：
|
窥视卡
雷达卡
发表于 2023-2-2 13:56:53
点击此处下载
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-21 06:52:54
