<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="lib/iconfont/iconfont.css">
<style>
.btn1{
/*需要添加url在三个字母*/
background-image: url(img/src=http___imgedu.lagou.com_1837519-20191107151128254-1992912590.png&refer=http___imgedu.lagou.jpg);
height: 200px;
background-repeat: no-repeat; /*只显示一次不重复叠加*/
/* background-size: 100% 100%; /*设置宽度和高度用于拉伸*/
background-position: center; /*背景图片定位*/
}
.btn2{
height: 42px;
width: 37px;
background-image: url(img/src=http___imgedu.lagou.com_1837519-20191107151128254-1992912590.png&refer=http___imgedu.lagou.jpg);
background-repeat: no-repeat; /*只显示一次不重复叠加*/
background-position: -376px 0px;
}
.btn3{
height: 42px;
width: 39px;
background-image: url(img/src=http___imgedu.lagou.com_1837519-20191107151128254-1992912590.png&refer=http___imgedu.lagou.jpg);
background-repeat: no-repeat; /*只显示一次不重复叠加*/
background-position: -374px -50px;
}
.box{
height: 40px;
width: 40px;
border-radius: 50%;
background-color: pink;
text-align: center;/*水平中间*/
line-height: 40px;
color: white;
font-weight: 600;
}
</style>
</head>
<body>
/*背景设置调整*/
<div class='btn1'></div>
<!--雪碧图,精灵图截取小图标用这种方式,这种图的使用也是为了节约内存-->
<div class='btn2'></div>
<div class='btn3'></div>
/*字体图标*/
<div class="box">
<span class="iconfont icon-xin"></span>
</div>
</body>
</html>