上一章我们说了背景相关的属性，但是不直观啊，所以这一章我们来做一个小小的练习，来使用一下这些属性，搞明白他们都是怎么回事。
首先写一个元素：
<div id="bg-change"></div>然后其余的东东就全靠 CSS 去设置了。
#bg-change {width: 50px;height: 50px;}设置宽高，就是一个小小的正方形。接着给它设置背景。那我们需要先有一个图片：
这是一个 50×100 的图片，上下颜色不一样（大家都看到了）。
#bg-change {width: 50px;height: 50px;background-image: url("/assets/lesson-0052/bg.png")}现在添加了背景，会是什么样子呢？
那么发生了什么？因为默认情况下，背景图片的左上角和元素的左上角对齐。而元素只有 50×50 像素大小。正好只能显示出背景图片的上半部分，于是就是只有橙红色部分被显示了出来。你可以尝试修改宽高查看效果。
如果你把宽高都改成了 100px 的话：
高度上，整个图片都可以显示出来了，于是达成了红配绿的成就。宽度上，一张背景已经不足以满足日益膨胀的元素了。于是，再来一张啊，这是平铺的效果，如果加上不平铺，那就只显示一个背景，能不能填满就先不管了。
不过现在我们先玩的简单一丢丢，这些干扰暂时不去管它。然后对样式做一点修改：
#bg-change {width: 50px;height: 50px;background-image: url("/assets/lesson-0052/bg.png")}#bg-change:hover {background-position: 0 -50px;}增加了一段，hover 描述了一种状态，就是当鼠标悬停在这个元素上面的时候，这个我们在前面讲链接相关的样式的时候说过，不过普通元素也是可以用这个伪类的。
鼠标悬停的时候怎样呢，就是又增加了一个属性。让背景的位置，纵向偏移 50px，注意是负的。你可能要问，怎么算正，怎么算负？后面我们会有把各种方向上的问题放在一起总结，现在么……其实就两个方向的事情，试试就行了，丝毫无需消耗脑细胞去记忆。来看看效果，记得把鼠标放上去看哦~
如果没有变化，请确认你是在本教程的官方网站（https://ek58.com/）阅读哦。
那么发生了什么呢？当鼠标悬停在元素上面，元素的背景发生偏移，正好把绿色部分放在元素中显示。这就做出了一个十分简单的动态交互效果。
这个原理我们经常用到，因为网页中很多装饰的图片非常小，如果每个图片都要向网站发起一次请求，这会很慢，也会浪费各种资源。所以，就把它们都放在一张图片中。然后再在元素中通过背景偏移，只显示需要的部分。这种技术叫做 CSS Sprites，国内一般称作 CSS 精灵。
这个练习灰常简单，一共没有几行，大家动手写一写吧。
写完之后修改里面的参数看看效果，想想为什么，出现问题又该如何解决呢？这样一个小练习就成了好多个小练习，事半功倍，多好！（老鼠是这么为懒惰的你们着想，所以你们就真的不动手练习么？哼╭(╯^╰)╮，生气气哦~
暂无评论内容