<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
width: 18px;
height: 24px;
background-color: pink;
background-image: url(./images/taobao.png);
/* 背景图位置属性: 改变背景图的位置 */
/* 水平方向位置 垂直方向的位置 */
/* 想要向左侧移动图片, 位置取负数; */
background-position: -3px 0;
}
b {
display: block;
width: 25px;
height: 21px;
background-color: green;
background-image: url(./images/taobao.png);
background-position: 0 -90px;
}
</style>
</head>
<body>
<!-- <img src="./images/taobao.png" alt=""> -->
<!-- 精灵图的标签都用行内标签 span, b, i -->
<span></span>
<b></b>
</body>
</html>
