css--spirit

最新推荐文章于 2021-06-18 18:13:58 发布

xuqi7

最新推荐文章于 2021-06-18 18:13:58 发布

阅读量324

点赞数

分类专栏：杂

本文链接：https://blog.csdn.net/xuqi7/article/details/74789070

版权

杂专栏收录该内容

95 篇文章 0 订阅

订阅专栏

作用：一张图片上的不同小图标定位到确定位置

示例：

html代码：

<div>
<p>关注我们</p>
<div class="sm-img">
<div id="sm-img1"></div>
<div id="sm-img2"></div>
<div id="sm-img3"></div>
</div>

css代码：

.sm-img div{
width: 50px;
height: 50px;
margin-right: 45px;
background-color: #52BBFF;
border-radius: 50%;
background-image: url(../img/footer_focus.png);
background-repeat: no-repeat;
cursor:pointer;
float:left;
}

#sm-img1{
background-position: 0 8px;
}

#sm-img2{
background-position: -90px 10px;
}

#sm-img3{
background-position: -180px 10px;
}