背景图定位
上一小节的运行过后看似好像没什么问题，那么我们来给它个边框试试：
background-position: 你想要的位置;
所以这里我们可以给它定位值：
<!DOCTYPE html>
<html>
<head>
< charset="UTF-8">
<title>CSS Sprites</title>
<style>
* { padding: ; margin: ; }
/* 这段是为了居中，不是重点，看不懂的话可以无视 */
body {
height: vh;
display: flex;
align-items: center;
justify-content: center;
}
.sprite {
/* 宽高要设置的和图标一样大或者稍微大一点点 */
width: px;
height: px;
/* 背景图地址设置为Css Sprite的位置 */
background-image: url(http://img.mukewang.com/wiki/5ed9bc1809824eef00180038.jpg);
/* 背景图重复 */
background-repeat: no-repeat;
/* 令背景图在正确的位置 */
background-position: top;
/* 边框，便于对比背景图所在位置 */
border: px solid black;
}
</style>
</head>
<body>
<div class="sprite"></div>
</body>
</html>
运行结果：
学会了背景的定位就好像学会了一门魔法，用这个魔法可以随意的控制Css Sprite的各项图标。
但是这些都是静态的，固定在哪个位置就是哪儿了，如果想让它有一些交互的话还是需要动态的去更改背景图的定位。
下一小节我们将模仿的交互来教会大家如何动态更改定位。
602392714
清零编程群