这几天一直在学习前端，想仿作一个优秀的官网——王者荣耀。于是乎就开始去网站上扒图片。
我扒这个“下载游戏”的时候，遇到了一个问题：
我扒出来的图居然是。。。。
这是个啥嘛。。。
我再仔细一看，这张大图里面出现的小图，在官网的页面上都可以找到。这么说来，这应该是一张图片实现多张图片的作用，应该是为了减少客户端向服务器请求的次数。
每当客户端需要获取图片时，都需要向服务器请求一次，像这张图中，如果把每一个小部分都拆开来请求，需要请求19次。然而直接把这张图片整合成一张大的图片，则只需要请求一次，并将图片保存在本地，然后就可以通过一些技术手段来实现每一给小部分的单独展示了。
话不多说，我们直接来看如何实现这种操作（以登录按钮为例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<!--先准备一个盒子用来放置图片-->
<div></div>
</body>
</html>
下面我们先给这个盒子做一些基本的设置并添加背景图片：
div{
/*盒子水平竖直居中*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -118px;
margin-top: -64px;
/*宽度高度*/
width: 236px;
height: 128px;
/*添加背景图片*/
background: url("images/index.png");
/*为了方便展示，添加一个边框*/
border: black 1px solid;
}
结果是这样的:
下面我们对背景图片位置做出一些调整：
经过测量，下载游戏图标在整张图上的位置是x=0px，y=220px
那么我们就可以来操作一下：
background-position: 0 -220px;
调整一下图片的位置，则最终的结果是这样的：
完美！
这种技术叫精灵图技术，广泛应用于大型网站，尤其是一些不经常更换的图片、图标上，这样可以提升网站的加载速度，给用户带来更好的阅读体验。
对于腾讯代理的游戏来说，基本上都有采用这种技术。
2752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
