03背景与渐变

CSS3 把背景从「一张平铺图」升级成一套图层系统： 多层叠加、任意缩放、分区裁剪；而渐变函数让 CSS 不发一个请求就能「画图」—— 按钮、横幅、条纹、光斑全是代码画出来的。

约 35 分钟 7 个动手实验 零请求绘图

一、CSS3 背景增强总览

先把新武器摆上桌。下面这批属性里，background-image 支持的 渐变函数和「逗号分隔的多层写法」，是 CSS3 背景的灵魂：

CSS3 背景属性 / 渐变函数全表
属性 / 函数作用常用值
background-image背景图层，可逗号分隔叠多层url() / 渐变函数
background-size每层的尺寸cover / contain / px / %
background-origin定位的参考区域border-box / padding-box / content-box
background-clip绘制的裁剪区域同上，另有 text（渐变文字）
background-position每层的位置（可分层）center / left top / x y
background-repeat平铺方式（可分层）repeat / no-repeat / repeat-x
background-attachment随内容滚动还是钉在视口scroll / fixed（视差效果）
linear-gradient()线性渐变（直线过渡）方向 + 色标
radial-gradient()径向渐变（中心扩散）形状 + 位置 + 色标
conic-gradient()锥形渐变（绕圆心转）起始角 + 色标
repeating-*-gradient()重复渐变（条纹）同上三兄弟
渐变函数属于 background-image（以及 border-image）的取值， 不是独立属性——所以它不能当 background-color 用，但可以和其他背景层层叠加。

二、多重背景：像图层一样叠加

background-image 用逗号分隔可以写多层， 先写的在最上面——和 PS 的图层面板一个逻辑： 光斑、纹理放上层的半透明渐变，底色放最下面。

两个光斑层 + 一个渐变底 = 零图片 Hero——把光斑的 transparent 26px 改成 transparent 10px，光斑变小
层序口诀：「逗号排队，先写的在上面」。 想换底层颜色只改最后一层，别把光斑盖到渐变下面去。

三、background-size：cover 与 contain 之争

背景图默认按「原始尺寸」显示，塞不满容器就会平铺或留白。 background-size 负责缩放，两个明星值必须分清： cover「铺满裁边」、contain「完整留白」。

同一张 3:2 的内嵌 SVG 图、同一个 220×120 容器——把 .a 的 cover 改成 contain 看留白
cover 与 contain 的选择场景
场景用哪个理由
全屏首屏横幅cover必须铺满，裁掉就裁掉
商品图 / 头像框cover比例统一不变形（配合裁切）
logo / 图标contain完整显示最重要

四、background-origin 与 background-clip：三个盒子区域

一个元素从外到内有三层区域：border-box（含边框）→ padding-box（含内边距）→ content-box（只有内容）。 这对属性就是问背景两个问题：

  • background-origin：定位从哪个区域算起（背景图的原点）
  • background-clip：背景绘制到哪个区域为止（超出就裁掉）
背景一步步「退让」——.a 铺到边框底下，.c 只铺内容区；把 .c 的 origin 改成 border-box 试试
配一个虚线 / 半透明边框，origin 和 clip 的区别一眼可见—— 这也是调试边框区域问题的小技巧。

五、linear-gradient：线性渐变

沿着一条直线从一个颜色过渡到另一个颜色。语法三要素： 方向 + 至少两个颜色（色标）。 色标后面可以跟位置，位置可以只写一部分——两个色标挤在同一个位置，就是「硬边」。

方向、多色、色标、硬边四种玩法——改改角度和百分比：

把 .d 的双位置 50% 改成 70%，硬边位置右移；.b 的角度改成 45deg
角度方向易记法：deg 指的是渐变线指向的方向—— 0deg 向上、90deg 向右、180deg 向下、270deg 向左。 「to right」和「90deg」是同一个意思。

六、radial-gradient：径向渐变

从一个圆心向四周扩散，适合光晕、聚光灯、立体球。 语法：radial-gradient(形状 at 位置, 色标…)， 形状 circle（正圆）/ ellipse（椭圆，默认）。

把 .b 的高光从 30% 30% 挪到 70% 30%，立体球的光源方向翻转
「立体球」公式值得背下来：高光圆心放 30% 30%，亮色起步、深色收尾、圆形容器。 头像、图标、按钮高光都能套。

七、conic-gradient 与 repeating：条纹与色环

conic-gradient 锥形渐变绕着圆心转圈配色—— 色环、进度环的官方解法；repeating-linear-gradient 重复线性渐变则是 条纹纹理生成器（警戒条、斑马纹、进度条格纹）。

把进度环的 65% 改成 25% 或 90%、把条纹的 24px 改成 8px、角度 45deg 改 90deg——改一个数字换一种纹理
进度环不用图、不用 JS：conic-gradient(颜色 0 百分比, 底色 百分比 100%) + 中心盖圆。百分比由 JS 更新时，改一下 style 就能动态转起来。

八、实战：渐变按钮与渐变文字

两个高频实战：渐变按钮（渐变 + 阴影 + hover）， 和渐变文字——把渐变裁进文字笔画里， 核心是 background-clip: text + 把文字填色变透明。

渐变按钮（hover 试试）+ 渐变文字——换一组渐变颜色，看按钮和文字一起变色；给渐变文字再加一层光晕试试
background-clip: text 至今习惯带上 -webkit- 双写； 而 -webkit-text-fill-color 一旦生效会盖过 color—— 所以兜底纯色要写在前面（又见第 1 课的「先保底，再加糖」）。

九、本章小结

  • 背景是图层系统：background-image 逗号分隔多层，先写的在上
  • background-size：cover 铺满裁边、contain 完整留白，还能指定 px / %
  • background-origin 管「从哪算起」，background-clip 管「画到哪为止」，都有 border / padding / content 三区，clip 还有 text
  • 渐变四兄弟：linear 直线、radial 扩散、conic 转圈、repeating 出条纹
  • 色标可带位置，两个色标挤同一位置 = 硬边——分栏、进度环、双色按钮的基础
  • 立体球公式：高光 at 30% 30% + 圆形容器；进度环公式：conic 硬切 + 中心盖圆
  • 渐变文字：background-clip: text + -webkit-text-fill-color: transparent，先写 color 兜底
动手练习：在第七节的实验台里，把进度环的 65% 改成 25% 和 90%； 再把警戒条纹的角度 45deg 改成 90deg、把 24px 改成 8px。 体会「改一个数字，换一种纹理」——渐变是最好的免费画图工具。