上一章我们说了背景相关的属性,但是不直观啊,所以这一章我们来做一个小小的练习,来使用一下这些属性,搞明白他们都是怎么回事。

首先写一个元素:

<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://dmnydn.com/)阅读哦。

那么发生了什么呢?当鼠标悬停在元素上面,元素的背景发生偏移,正好把绿色部分放在元素中显示。这就做出了一个十分简单的动态交互效果。

这个原理我们经常用到,因为网页中很多装饰的图片非常小,如果每个图片都要向网站发起一次请求,这会很慢,也会浪费各种资源。所以,就把它们都放在一张图片中。然后再在元素中通过背景偏移,只显示需要的部分。这种技术叫做 CSS Sprites,国内一般称作 CSS 精灵。

这个练习灰常简单,一共没有几行,大家动手写一写吧。

写完之后修改里面的参数看看效果,想想为什么,出现问题又该如何解决呢?这样一个小练习就成了好多个小练习,事半功倍,多好!(老鼠是这么为懒惰的你们着想,所以你们就真的不动手练习么?哼╭(╯^╰)╮,生气气哦~

【本章助记卡片:卡片 for 第五十二章