上节课中我们学习了背景图像，这节课我们学习背景图像的高级知识，如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{ 76px; height:76px; background: url(https://www.liyongzhen.com/docs/images/sprit.png); 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动画：
