雪碧图移动端雪碧图

最新推荐文章于 2023-05-29 14:30:14 发布

徐同保

最新推荐文章于 2023-05-29 14:30:14 发布

阅读量1.1k

点赞数 1

分类专栏： web前端前端技术分享文章标签： css 雪碧图

本文链接：https://blog.csdn.net/xutongbao/article/details/78676973

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

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