CSS 背景样式（二）

渐变让背景有层次

上一篇的背景都是实色和图片，这篇来点有层次的，渐变。渐变本质是浏览器生成的背景图片，所以它写在 background-image 里，而不是 background-color。

linear-gradient 线性渐变

线性渐变沿一条直线过渡颜色。第一个参数是方向，可以是关键字 to right、to bottom、to bottom right 这些，也可以直接给角度，比如 45deg，0 度朝上，顺时针增加。

.box {
  /* 从上到下，白到灰 */
  background-image: linear-gradient(to bottom, #ffffff, #f0f0f0);
}
.box2 {
  /* 按角度过渡，红到蓝 */
  background-image: linear-gradient(45deg, #ff0000, #0000ff);
}

方向可以省略，默认 to bottom。渐变支持多个色标，不止两个颜色，还能在色标后面加位置百分比。

.badge {
  /* 三个颜色，各占三分之一 */
  background-image: linear-gradient(to right, red, orange, yellow);
}
.tip {
  /* 色标位置控制过渡范围 */
  background-image: linear-gradient(to right, blue 0%, cyan 50%, white 100%);
}

颜色渐变到透明的写法很常用，比如页面底部做渐隐效果。

.fade-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}

radial-gradient 径向渐变

径向渐变从中心向外扩散。默认是椭圆，加 circle 关键字可以固定成圆形。第一个参数是形状，后面跟色标。

.light {
  /* 圆形渐变，从中心白色到透明 */
  background-image: radial-gradient(circle, #fff, transparent);
}

径向渐变适合做光晕、聚光灯这类效果。

repeating-linear-gradient 重复渐变

repeating-linear-gradient 会重复循环渐变，适合做条纹背景。用法和 linear-gradient 类似，把最后一个色标的位置当作周期，就能生成重复的条纹图案。一句带过，用到时查文档即可。

多重背景叠加

一个元素可以同时挂多张背景图，用逗号分隔，写在最前面的在最上层。每张背景图可以独立设置 position 和 size，这个能力能实现很多花活。

.card {
  background-image:
    url("icon.png"),         /* 第一张，最上层 */
    url("bg-pattern.png");   /* 第二张，最下层 */
  background-repeat: no-repeat, repeat;
  background-position: center, top left;
  background-size: 40px, cover;
}

注意背景图列表和 repeat、position、size 列表一一对应，多张图想控制不同的平铺和位置，就要按顺序分别写。

渐变的应用

渐变按钮，从浅色到主色，比纯色按钮耐看。

.btn {
  background-image: linear-gradient(to bottom, #66b1ff, #409eff);
}

页面背景，从顶部的浅色过渡到深一点的色，比纯色舒服。

body {
  background-image: linear-gradient(to bottom, #eef4ff, #dfe9ff);
}

进度条，用渐变填充效果更立体。

.progress {
  background-image: linear-gradient(to right, #67c23a, #95d475);
}

简写的坑

background 简写会把没写的属性重置为默认值。比如先写了 background-image，后面又写一行 background: #fff，之前的渐变会被清掉。多重背景也不能塞进 background 简写里，必须分开写属性。

.box {
  background-image: linear-gradient(to right, red, blue);
  background: #fff;   /* 这一行会把上面的渐变清掉 */
}

所以渐变和颜色混用的时候，要么用 background 一次性写完，要么全部用 background-image、background-color 单独写，不要混合使用。

小结

渐变是 background-image 的语法糖，线性、径向、重复三种各有用途，多重背景让一张卡片能装下好几层图。记住最关键的坑，简写会重置，多背景要分开写。文字、颜色、背景三块都齐了，样式基础算是稳了，相关知识点也可以回看整个系列的路线图。