CSS技术的使用场景：有效的减少了服务器接收和发送请求的次数，css精灵是一种出来网页背景图像的方式，将一个页面设计到的所有零星背景图集中到一张大图中去，然后将大图应用于网页 。通过background-position 和padding来实现
例如要切大图里的小图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { float: left; background: url(image/abcd.jpg); } span:first-child { width: 64px; height: 106px; background-position: -325px -142px; } span:nth-child(2) { width: 137px; height: 104px; background-position: -114px -564px; } </style> </head> <body> <span></span> <span></span> <span></span> </body> </html>
制作精灵图遵循原则
1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
2. 精灵图的宽度取决于最宽的那个背景
3. 可以横向摆放也可以纵向