1. 模仿 百度 效果
百度 的网站是每当鼠标放在相机图标那个位置的时候，相机就会切换到蓝色：
我们来模仿一下这个 效果 ：
<!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 ;
}
/* 当鼠标移入时的样式定义 */
.sprite :hover {
/* 令背景图 显示 在正确的位置 */
background-position : b ott om ;
}
</ style >
</ head >
< body >
< div class = " sprite " > </ div >
</ body >
</ html >运行结果：
可以看到，只要改变一下背景图的位置，就可以切换到另 一个 不同的图标，只要位置控制得当，一张Css Sprite就可以 显示 出各式各样不同的图标，是不是很神奇呢？
2. 更加直观的理解
如果有些同学并没有能够理解的话，我们可以给背景 加上 一个 过渡动画，方便大家理解究竟是如何切换图标的：
<!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 ;
/* 为背景 添加 过渡动画 */
transition : background s ;
}
/* 当鼠标移入时的样式定义 */
.sprite :hover {
/* 令背景图 显示 在正确的位置 */
background-position : b ott om ;
}
</ style >
</ head >
< body >
< div class = " sprite " > </ div >
</ body >
</ html >运行结果：
可以看到其实就是这么个原理，两张形状一样但颜色不一样的图形放在一张Css Sprite中，然后再控制位置即可。
3. 小结
就是在 页面 上加入了这么 一个 动态的 效果 ， 页面 才不会显得那么平静如水。
有趣的交互 效果 能让你的 页面 熠熠生辉、锦上添花。
但并不是所有Css Sprite的尺寸都能这么完美的贴合元素，下一小节我们将告诉大家应该如何调节背景 图片 的大小以适应 页面 元素。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did100551