网页中多个图标在一张图片上，使用css将各图标显示

test.png

完整的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
	    .tree-default{
                width:100px;
                height:100px;
                margin:50px;  /*为了查看的效果更明显*/
                border-radius: 10px;
                border:1px #e8e8e8 solid;
            }
            .tree-font{
                background: url("test.png") -200px -100px no-repeat;
            }
            .tree-time{
            	/*background-color: */
                background-image: url("test.png");
                background-repeat: no-repeat;
                background-position: -100px -150px;
                background-size:250px 200px;   /*整张图片都变小之后再计算偏移量*/
            }
        </style>
    </head>
    <body>
        <div class="tree-default tree-font"></div>
        <div class="tree-default tree-time"></div>
    </body>
</html>

完成后的效果：

 

posted @ 2018-08-16 11:25  idjl  阅读(1081)  评论(0)  编辑  收藏  举报