<!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://s2.51cto.com/images/blog/202206/30162249_62bd5d592775956870.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=); 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://s2.51cto.com/images/blog/202206/30162249_62bd5d592775956870.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk="></div>
</body>  
</html>




雪碧图 移动端雪碧图_雪碧图


雪碧图 移动端雪碧图_html_02

<!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://s2.51cto.com/images/blog/202206/30162249_62bd5d592775956870.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=); 
            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://s2.51cto.com/images/blog/202206/30162249_62bd5d592775956870.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk="></div>  
</body>    
</html>

雪碧图 移动端雪碧图_雪碧图_03

在线快速制作雪碧图：​​https://www.toptal.com/developers/css/sprite-generator​​