1. 背景图定位
上一小节的 代码 运行过后看似好像没什么问题，那么我们来给它 加上 个边框试试：
加上 边框后发现它其实是有点歪了，偏 左上角 一点，这是因为background-image 属性 默 认是定位在元素的 左上角 的。
2. 来看一下定义背景图位置的语法怎么写：
background-position: 你想要的位置;
想要的位置一共可以填两个值，第 一个 值代表横向的位置，第二个值代表纵向位置，如果省略第二个值 默 认是居中的。 你想要的位置可以是 top、center、b ott om、left、right这种关键字，如：background-position: top right; 也可以是百分比数值，如：background-position: 100% 50%; 还可以是具体的数字单位，如：background-position: 100px 50px;
所以这里我们可以给它 一个 定位值：
<!DOCTYPE html>
< html >
< head >
< Meta charset = " UTF-8 " >
< title > CSS Sprites </ title >
< style >
* { padding : ; margin : ; }
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
body {
height : vh ;
dis play : 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 >运行结果：
3. 小结
学会了背景 图片 的定位就好像学会了一门魔法，用这个魔法可以随意的控制Css Sprite的各项图标。
但是这些都是静态的，固定在哪个位置就是哪儿了，如果想让它有一些交互 效果 的话还是需要动态的去更改背景图的定位。
下一小节我们将模仿 百度 首页 的交互 效果 来教会大家如何动态更改定位。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did100549