css中精灵技术的优缺点及练习
为什么需要精灵技术？
当一个用户访问一个网站时，需要网页向服务器发送请求，网页上的每张图片都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图当做修饰，当网页中图像过多时，服务器就会频繁的接受和发送请求，这将大大降低页面的加载速度。
为了有效减少服务器接受和发送请求的次数，提高页面加载速度，css精灵技术出现了。
精灵图技术的本质
所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
如何实现
那么这是怎么实现将这么一张复杂的图片分别展示出来的呢，这里就得运用到了background-position。我们通过它来改变背景图片的位置，从而显示出我们想要显示出来的部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
display: inline-block;
background-image: url(../20734122-3534cb025b73d773.jpeg);
background-repeat: no-repeat;
}
.di1{
width: 90px;
height: 90px;
background-position: -130px -90px;
}
.di2{
width: 90px;
height: 90px;
background-position: -543px -90px;
}
</style>
<body>
<div class="di1"></div>
<div class="di2"></div>
</body>
</html>
我们假设这个背景是拼接起来的，我们需要把图片中的文字"你"，"月"给显示出来。
显示如下：
缺点
在拼图时，比较麻烦，还有后期维护也比较麻烦，比如做好的图，然后一个图标改了大小，但是图标之间留的位置不够，那你就要重写很多css，当然现在已经很多这方面的软件，或者在线生成代码。但这个麻烦还是存在的。
2984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
