本文介绍了如何通过CSS背景定位来减少HTTP请求，提高网页加载速度。通过设置一个包含所有小图片的大图作为背景，并调整各元素的background-position属性，实现了用一个图片代替多个图片的效果。示例代码展示了如何实现这一技巧。
在平常的网页开发中，我们常常会加载很多小图片，<img src="" alt="">一次图片的加载就相当于一次http请求，过多的请求会拖慢网页的访问速度。有时我们会采用css坐标方式加载图片，这样原本需要加载十张小图片就变成了只加载一张图片。
话不多说，先上代码给需要实现功能的小伙伴。
<html>
<head>
<style type="text/css">
.spanicon {
width: 32px;
height: 32px;
background: url(https://img-blog.youkuaiyun.com/20130808153035296) no-repeat;
border: 0;
color: #464646;
line-height: 32px;
margin-top: 2px
}
td {
vertical-align: middle;
text-align: left
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<table>
<tr>
<td class="spanicon" style="background-position: 0px 0px;"></td>
<td><a href="#">test1</a></td>
</tr>
<tr>
<td class="spanicon" style="background-position: 0px -32px;"></td>
<td><a href="#">test2</a></td>
</tr>
<tr>
<td class="spanicon" style="background-position: 0px -64px;"></td>
<td><a href="#">test3</a></td>
</tr>
<tr>
<td class="spanicon" style="background-position: 0px -96px;"></td>
<td><a href="#">test4</a></td>
</tr>
<tr>
<td class="spanicon" style="background-position: 0px -128px;"></td>
<td><a href="#">test5</a></td>
</tr>
<tr>
<td class="spanicon" style="background-position: 0px -160px;"></td>
<td><a href="#">test6</a></td>
</tr>
<tr>
<td class="spanicon" style="background-position: 0px -192x;"></td>
<td><a href="#">test7</a></td>
</tr>
<tr>
<td class="spanicon" style="background-position: 0px -224px;"></td>
<td><a href="#">test8</a></td>
</tr>
<tr>
<td class="spanicon" style="background-position: 0px -256px;"></td>
<td><a href="#">test9</a></td>
</tr>
<tr>
<td class="spanicon" style="background-position: 0px -288px;"></td>
<td><a href="#">test10</a></td>
</tr>
<tr>
<td class="spanicon" style="background-position: 0px -320x;"></td>
<td><a href="#">test11</a></td>
</tr>
<tr>
<td class="spanicon" style="background-position: 0px -352x;"></td>
<td><a href="#">test12</a></td>
</tr>
</table>
</body>
</html>
点此打开代码来源地 原地址已经给出图片的具体样式，具体一下部分css代码及实现思路。由于我不知道你是否能全部看懂，为方便初学者，我将尽可能写出每一行css的功能，如果你比较熟悉，请持续点击下拉。
.spanicon {
width: 32px; /* 设置表格td的宽度 */
height: 32px; /* 设置表格td的高度*/
background: url(https://img-blog.youkuaiyun.com/20130808153035296) no-repeat; /* 设置背景图片与不平铺 */
border: 0; /*无边框*/
color: #464646; /*颜色*/
line-height: 32px; /*行高*/
margin-top: 2px /*上边距*/
}
td {
vertical-align: middle; /*设置文字与图片居中，在某些条件下无法实现效果。*/
text-align: left /* 文字左对齐 */
}
a{
text-decoration:none; /*取消超链接的下划线*/
}
如果只是到这里，还实现不了最终效果，我们发现，在每个<td> 中都有 style="background-position: 0px 0px;" 代码。
w3学院给出的background-position解释中
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素(0px 0px)或任何其他的CSS单位。 |
我们接着来看一张图片
点击打开链接 ，加入我们将图片左上角放置于B区域，左上角对准原点，图片位置垂直向下，加上td的宽度和高度，第一张图片应该为32*32；所以第一个值为
style="background-position: 0px 0px;" 第二个值x 保持不变，y 变为-32，也就是
style="background-position: 0px -32px;"以此类推持续往下。我们不禁要想，为什么图片的高度和宽度（也就是td表格的高度和宽度）为32？我ctrl+d清屏，双击photoshop，
ctrl+0打开图片，alt+ctrl+i 显示图片大小，宽度为34，总高度484除以图片数量15就等于，嗯，等我打开计算器算一下，等于32.2666由于是手动切图，与实际肯定存在一定
差异。不过大体是这个值。
写在最后，具体更推荐大家使用ul li 来做，既方便控制也可以加快网页的加载速度。
扫一扫
2760
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
