上节课中我们学习了背景图像，这节课我们学习背景图像的高级知识，如Css Sprites，CSS 背景渐变等。
Css Sprites
Css Sprites，国内也叫CSS精灵。它的原理是将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。
我们需要Sprites图片，可以在网上下载，可以叫美工做些，可以在线生成。这里推荐一个在线生成的网站。https://www.toptal.com/developers/css/sprite-generator
我们使用的图片是这个样子~~
下面的代码展示两个div，开始它们有背景图片，当光标悬停时切换到另一张图片。
<!DOCTYPE html><html>
<head>
<title>CSS Sprites</title>
<style type="text/css">
div{
width:76px;
height:76px;
background: url(//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL3d3dy5saXlvbmd6aGVuLmNvbS9kb2NzL2ltYWdlcy9zcHJpdC5wbmc=.jpg);
background-repeat:no-repeat;
display: inline-block;
}
div.one{
background-position:0px 0px
}
div.one:hover{
background-position:0px -76px
}
div.two{
background-position:-76px 0px
}
div.two:hover{
background-position:-76px -76px
}
</style>
</head>
<body>
<h1>软件开发，成就梦想</h1>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
background-position 属性有两个值，第一值表示水平位置，正值表示往前，负值表示往后。第二个表示垂直位置，正值表示往上，负值表示往下。
background-position 属性值需要慢慢调整，细心+耐心就能做好。
盒子大小背景图像大小可以调整。这里我们使用默认的大小。
计算结果GIF动画：