CSS精灵技术

CSS精灵技术产生的原因

当网页中的图片过多时，服务器频繁的接受请求和发送图片，会造成服务器的压力过大，这将大大的降低页面的加载速度

CSS精灵技术

将网页中的小背景图片整合到一张大图上，这样服务器只需要一次请求即可。

这样大大减少了服务器接受和发送请求的次数，提高了页面的加载速度

CSS精灵技术的代表就是精灵图

使用一张精灵图作为背景图片，使用background-position 移动背景图片的位置

使用精灵图时一定要精确测量每个小背景图片的大小和位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         .img01{
 9             display: block;
10             border: blue 1px solid;
11             margin: 0 auto;
12         }
13         .d1{
14             width: 90px;
15             height: 90px;
16             border: 1px solid rgb(22, 138, 118);
17             background-image: url("./javascript练习/img/精灵图.jpg");
18             background-position: -29px  -24px;
19         }
20 
21 
22     </style>
23 </head>
24 <body>
25     <!-- 500px  * 302px -->
26     <img src="./javascript练习/img/精灵图.jpg" alt="精灵图" class="img01">
27     <div class="d1"><a href="https://www.sougou.com"></a></div>
28    
29 </body>
30 </html>