CSS 精灵技术 sprite

本文主要是介绍CSS 精灵技术 sprite，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

精灵技术产生的背景

在这里插入图片描述
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为京东网站中的一个精灵图。
在这里插入图片描述

精灵技术的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

制作精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。 
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

结束语：小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS精灵技术的使用</title><style>.mobile {width: 15px;height: 20px;background: url(images/jd.png) 0 -100px no-repeat;}.shoping {width: 57px;height: 49px;background: url(images/jd.png) 0 -438px no-repeat;}</style>
</head>
<body><div class="mobile"></div><hr><div class="shoping"></div>
</body>
</html>

在这里插入图片描述

拼出自己的名字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>拼出自己的名字</title><style>span {background: url(images/abcd.jpg) no-repeat;float: left;}span:first-child {width: 139px;height: 109px;background-position: -115px -560px;}span:nth-child(2) {width: 106px;height: 116px;background-position: -388px -138px;}span:nth-child(3) {width: 105px;height: 118px;background-position: 0 -272px;}</style>
</head>
<body><span></span><span></span><span></span><span></span>
</body>
</html>

在这里插入图片描述

王者荣耀精灵图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>王者荣耀精灵图</title><style>a {float: left;width: 198px;height: 53px;background: url(images/sp.png) no-repeat;background-position: -389px -303px;text-align: center;line-height: 53px;color: #fff;font-weight: 700;text-decoration: none;}a:hover {background-position: -170px -300px;}</style>
</head>
<body><a href="#">奖励兑换</a>
</body>
</html>