精灵图制作网站：www.toptal.com/developers/…
html代码：
<!doctype html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>精灵图</title> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <style> #container{ margin: 40px; } .icons{ display: flex; align-items: center; } .img{ margin-right: 20px; /* transform: scale(.5); */ } /* 精灵图样式 */ .bg-cus_loca { width: 48px; height: 58px; background: url('css_sprites.png') -246px -90px; } .bg-del { width: 60px; height: 60px; background: url('css_sprites.png') -246px -10px; } .bg-distribution_car { width: 84px; height: 60px; background: url('css_sprites.png') -142px -10px; } .bg-err { width: 112px; height: 112px; background: url('css_sprites.png') -10px -10px; } .bg-pay_wx { width: 72px; height: 68px; background: url('css_sprites.png') -10px -142px; } .bg-pc { width: 72px; height: 64px; background: url('css_sprites.png') -102px -142px; } </style> </head> <body> <div id="container"> <h2>原图</h2> <img src="./css_sprites.png"> <hr> <h2>图标</h2> <div class="icons"> <div class="bg-cus_loca img"></div> <div class="bg-del img"></div> <div class="bg-distribution_car img"></div> <div class="bg-err img"></div> <div class="bg-pay_wx img"></div> <div class="bg-pc img"></div> </div> </div> <script type="text/javascript"> </script> </body></html>效果图：
注意：
雪碧图太大了，放到指定位置只能显示一部分！
两个解决方法：1.上传雪碧图时就按照你需要的大小上传
2.使用缩放 transform: scale(.5);
使用background-size: 属性缩放整块背景图，这里要注意下缩放了背景图的大小，对应的background-position也要同比例缩放。
