<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 100px;background-color: dodgerblue">sasdasd</div>
    <!--background-image可以以图片为背景，如果设置了长度和宽度的话那么就会无限叠加出去，使用background-repeat:no-repeat可以这是是否堆叠和堆叠方向-->
    <!--border: 1px solid red为边框和框线颜色设置-->
    <div style="background-image: url(堆叠小图标.png);height: 40px;width:900px;border: 1px solid red;"></div>
    <!--缩小版点赞图标是这样做的-->
    <div style="background-image: url(堆叠小图标.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div>
    <div style="background-image: url(堆叠小图标.png);
    background-repeat:no-repeat;
    background-position-y:-58px;
    background-position-x:5px;
    height: 20px;
    width:20px;
    border: 1px solid red;"></div>
    <!--也可以一步到位-->
    <div style="background: url(堆叠小图标.png) 10px 10px  no-repeat;height: 40px;width:900px;border: 1px solid red;"></div>
</body>
</html>

 

版权声明：本文为qiangayz原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/qiangayz/p/8719628.html