【素材】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*此练习不需要reset.css*/
/*index.css*/
.wrap {
font-size: 20px;
font-weight: bold;
color: blue;
line-height: 20px;
}
.icon {
background: url("https://i-blog.csdnimg.cn/blog_migrate/f82ff548b370b431444d426682155073.png");
}
.test1 .icon {
width: 500px;
height: 500px;
}
.test2 .icon {
width: 250px;
height: 250px;
}
.test3 .icon {
width: 150px;
height: 150px;
background-position: -74px -91px;
}
</style>
</head>
<body>
<div class="bg">
<div class="wrap">
<div class="test1">
<p>测试1:无background-position,且宽高为整张图大小</p>
<div class="icon"></div>
</div>
<div class="test2">
<p>测试2:无background-position,宽高设为刚好显示第一个图标(但是画布太大)</p>
<div class="icon"></div>
</div>
<div class="test3">
<p>测试3:使用background-position精确定位第一个图标</p>
<div class="icon"></div>
</div>
</div>
</div>
</body>
</html>