background-image图片做背景（background-repeat、background-position）与点赞小图标的实现 

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

 

posted @ 2018-04-04 22:55  梦中琴歌  阅读(781)  评论(0)    收藏  举报