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>
