背景是一个比较有助于我们,观察元素所占用面积的属性。但这依旧不是绝对的,因为在后面的章节,我们马上就会看到例外的情况。

背景(background)本身是一个复合属性,那么我们展开来讲解:

背景色 background-color

这个很容易理解,后面的取值可以是颜色的名称,也可以是颜色值,那么这些我们都讲过,所以也就不详细说明了。

#box {
  background-color: red;
}

背景图 background-image

就是使用图片当做元素的背景,所以我们需要给出图片的地址,不过这里需要注意一下格式:

#box {
  background-image: url("miao.jpg");
}

需要使用 url("") 的结构来标记一下。如果你打算清除元素已有的背景图片,也就是把元素的背景图片设置为无,那么可以这样写:

#box {
  background-image: none;
}

因为没有图片地址,所以就不用使用上面那种结构了。

不过用到了图片以后,就要比纯色的情况复杂一些,所以我们有了如下属性:

图像重复 background-repeat

当图像的面积不足以覆盖整个元素的时候,默认会重复此图片,以将元素彻底覆盖。这就好像我们作图的时候用图案填充,又或者我们在铺地板上瓷砖的时候那种状态。

但有的时候,我们只需要在一个方向上进行重复,或者彻底不需要再进行重复,这时候就需要做一些设置:

#box {
  background-repeat: repeat; /* 两个方向上都重复,默认如此 */
  background-repeat: repeat repeat; /* 把两个方向分开写,第一个是横向(x 轴方向),第二个是纵向(y 轴方向) */
  background-repeat: no-repeat no-repeat; /* 不重复 */
  background-repeat: no-repeat; /* 与上面效果相同 */
  background-repeat: repeat-x; /* 在 x 轴方向(横向)重复 */
  background-repeat: repeat-y; /* 在 y 轴方向(纵向)重复 */
}

图像位置 background-position

图像和元素如何对齐,比如放在元素中间,放在左上角……

#box {
  background-position: 120px 160px; /* 横向距离左侧 120px,纵向距离顶部 160px */
  background-position: 10% 15%; /* 用百分比也一样,第一个是横向,第二个是纵向 */
  background-position: top; /* top bottom left right 代表四个边,现在只写了一个边,就是值确定了横方向或者纵方向,那么另一个方向默认为 50%,就是中间 */
  background-position: center; /* 居中,或者写两个 center,表示两个方向都居中,不过因为像上面一样默认另一边 50%,所以一个也可以 */
  background-position: bottom 10px right 20px; /* 指定在某一边的偏移量,也可单独指定一边,或者和上面写法配合 */
}

就那么几种取值,但是横向、纵向,一个值、两个值,一排列组合就很多了。找一个边界明显的图片设置一下看看效果,才是最快理解的方式。

图像尺寸 background-size

背景图片显示的尺寸,也是涉及到横纵两个方向。依旧可以用尺寸和百分比。然后由几个特殊值:

  • auto:自动大小,如果两个值都是 auto,那就是图片原始尺寸。如果只有一个 auto,则是确定一边之后,auto 这一边等比例缩放;
  • contain:保持图片比例,保证图片完整显示的情况下,尽可能大;
  • cover:保持图片比例,保证图片把元素完全覆盖的情况下,尽可能的小。

有点复杂,那就先读一遍好了,下一章我们稍微使用一下,才能更直观的去理解。而且后面我们也要用到的。理解是一个过程,不要追求看到就懂,都是在使用中不断理解的。我们看到别人用锤子,就是抡么,懂了,但是自己用,却因为不熟练砸到了手,很正常。经验是技能中很重要的一部分。

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