雪碧图 移动端雪碧图 

<!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



posted @ 2017-11-30 15:41  徐同保  阅读(174)  评论(0)  编辑  收藏  举报