<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>雪碧图</title><style type="text/css">span{display: inline-block; width: 24px; height: 24px; border: 1px solid #ccc;background-image: url(https://img-blog.csdn.net/20171130154115247?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHV0b25nYmFv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center); background-repeat: no-repeat;margin: 5px;}.icon1{background-position: 0 0;}.icon2{background-position: -24px 0;}.icon3{background-position: 0 -24px;}.icon4{background-position: 0 -48px;}</style>
</head>
<body><div>雪碧图：</div><div><span class="icon1"></span><span class="icon2"></span><span class="icon3"></span><span class="icon4"></span></div><div>原图：</div><div><img src="https://img-blog.csdn.net/20171130154115247?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHV0b25nYmFv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"></div>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>移动端雪碧图</title> <style type="text/css"> span{ display: inline-block; width: 12px; height: 12px; border: 1px solid #ccc; background-image: url(https://img-blog.csdn.net/20171130154115247?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHV0b25nYmFv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center); background-repeat: no-repeat; background-size: 200% auto;margin: 5px; } .icon1{background-position: 0 0;} .icon2{background-position: -12px 0;} .icon3{background-position: 0 -12px;} .icon4{background-position: 0 -24px;} </style>
</head>
<body> <div>雪碧图：</div> <div> <span class="icon1"></span> <span class="icon2"></span> <span class="icon3"></span> <span class="icon4"></span> </div> <div>原图：</div> <div><img src="https://img-blog.csdn.net/20171130154115247?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHV0b25nYmFv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"></div>
</body>
</html> 
在线快速制作雪碧图：https://www.toptal.com/developers/css/sprite-generator
