这几天一直在学习前端,想仿作一个优秀的官网——王者荣耀。于是乎就开始去网站上扒图片。
我扒这个“下载游戏”的时候,遇到了一个问题:
我扒出来的图居然是。。。。
这是个啥嘛。。。
我再仔细一看,这张大图里面出现的小图,在官网的页面上都可以找到。这么说来,这应该是一张图片实现多张图片的作用,应该是为了减少客户端向服务器请求的次数。
每当客户端需要获取图片时,都需要向服务器请求一次,像这张图中,如果把每一个小部分都拆开来请求,需要请求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;
调整一下图片的位置,则最终的结果是这样的:
完美!
这种技术叫精灵图技术,广泛应用于大型网站,尤其是一些不经常更换的图片、图标上,这样可以提升网站的加载速度,给用户带来更好的阅读体验。
对于腾讯代理的游戏来说,基本上都有采用这种技术。