前端实训-背景+字体图标+雪碧图_前端网页实训背景-CSDN博客

本文链接：https://blog.csdn.net/weixin_45720782/article/details/118326348

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