CSS 背景样式（一）

背景是页面最底层的装饰

文字和颜色讲完了，接下来是背景。背景是块级元素最基础的装饰手段，纯色、图片、定位、缩放，这些能力合起来能完成大部分页面场景。这一篇讲背景的基础属性，下一篇讲渐变。

background-color 纯色背景

background-color 设置背景色，写法与文字颜色完全一致，上一篇学的所有颜色写法都能用。

.header {
  background-color: #f5f5f5;
}

background-image 背景图片

background-image 用 url() 引用图片，路径可以是相对路径，也可以是网络地址。

.banner {
  background-image: url("images/banner.png");
}

背景图片默认会按原始尺寸平铺，想按需求控制，要配合下面几个属性。

background-repeat 平铺控制

默认情况下背景图会铺满整个元素，repeat 就是默认的平铺。no-repeat 不平铺，只显示一张，repeat-x 只在水平方向平铺，repeat-y 只在垂直方向平铺。

.bg {
  background-image: url("pattern.png");
  background-repeat: repeat-x;   /* 只横着铺，常见于页脚纹理 */
}

background-position 定位

不平铺之后，图片默认放在元素左上角，background-position 可以调整位置。可以用关键字组合，left、center、right 配 top、center、bottom，也可以用百分比和像素值。

.bg {
  background-position: center center;   /* 居中 */
  background-position: right top;       /* 右上角 */
  background-position: 20px 30px;       /* 距离左上角 20px 30px */
}

百分比定位有一条规则，百分比值是图片对应点对准容器对应点，比如 50% 50% 就是图片中心对准容器中心，这和像素定位的逻辑不同。简单记住这个规则即可。

background-size 缩放

background-size 控制背景图尺寸，是使用频率很高的属性。cover 图片等比例放大铺满容器，多余部分裁剪掉。contain 图片等比例缩放完整放进容器，多出的区域露出背景色。

.banner {
  background-size: cover;     /* 铺满，裁掉多余部分 */
  background-size: contain;   /* 完整显示，可能有留白 */
}

cover 适合不想留白的全屏背景，contain 适合必须完整展示的图。也可以直接写数值和百分比，比如 100px 50px 或 50% 50%。

背景简写

以上属性可以合并成一行 background，顺序建议是 color image repeat position / size。注意 position 和 size 之间要用斜杠分隔。

.box {
  background: #eee url("bg.png") no-repeat center / cover;
}

简写里没写的属性会被重置为默认值，这是简写最大的坑，下一篇会再详细讲。

综合示例

做一个登录页，背景图铺满，上面盖一层半透明遮罩，保证文字可读。遮罩用伪元素实现，因为背景色永远画在背景图下面，盖不住图。

.login-page {
  position: relative;
  background-image: url("city.jpg");
  background-size: cover;
  background-position: center;
}
/* 半透明遮罩层，盖在背景图上面 */
.login-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

::before 这种伪元素的用法，在CSS 伪类那篇有完整介绍。遮罩放好之后，登录表单再叠上去，层级用 z-index 控制即可。

小结

背景图四件套，image 放图、repeat 控平铺、position 定位置、size 管缩放，最后一行 background 简写收尾。遮罩层用伪元素实现。下一篇讲渐变色，让背景更生动。