讲解

背景一族属性控制元素「画布层」的绘制，范围默认延伸到 border 边缘（padding 区域也有背景）。background-color 设底色；background-image: url(...) 贴图；background-repeat 控制平铺（默认 repeat，常用 no-repeat 或 repeat-x）；background-position 定位（left top、center、right 20px bottom 10px、或百分比）；background-size 最关键：cover 缩放图片到「刚好铺满」元素（可能裁切，头图首选）、contain 缩放到「完整显示」（可能留白，logo 首选）、也可以写具体尺寸如 100px auto；background-attachment: fixed 让背景相对视口固定（视差效果，移动端 Safari 支持差）。

background 简写可以一行组合以上所有：background: url(a.jpg) center / cover no-repeat #333——注意 size 要跟在 position 后面用斜杠分隔。简写会重置没写的子属性，所以「先简写后微调」比「先微调后简写」安全。还可以逗号分隔设置多重背景，先写的图层在上。

渐变是「用代码生成的图片」，用在 background-image 的位置：linear-gradient(方向, 色标...) 线性渐变，radial-gradient 径向渐变。方向写 to right、to bottom right 或角度 135deg；色标是「颜色 + 可选位置」，如 red 0%, blue 100%。两个色标位置相同可以得到硬边界，这是用渐变画条纹、网格纸、分割线的技巧。渐变本质是图片，不能用在 background-color 里，也不能和 transition 直接补间（现代方案是注册 @property 自定义属性过渡色相）。

示例

/* 头图：铺满裁切 + 居中 + 不重复 + 兜底底色 */
.hero {
  background: url('/images/hero.jpg') center / cover no-repeat #2b2d42;
  min-height: 60vh;
}

/* logo：完整显示不裁切 */
.logo {
  background: url('/images/logo.svg') center / contain no-repeat;
  width: 120px;
  height: 40px;
}

/* 线性渐变背景与文字可读性蒙层 */
.banner {
  background-image:
    linear-gradient(rgb(0 0 0 / 45%), rgb(0 0 0 / 45%)),
    /* 上层：半透明黑蒙层 */ url('/images/photo.jpg'); /* 下层：照片 */
  background-size: cover;
}

/* 硬边界渐变画出条纹 */
.stripes {
  background: linear-gradient(45deg, #f1f3f5 25%, #fff 25%, #fff 50%, #f1f3f5 50%, #f1f3f5 75%, #fff 75%);
  background-size: 24px 24px;
}

常见坑

  • cover 与 contain 选错：cover 保证铺满但会裁图，重要内容（人脸、文字）放在图片中央；contain 完整但留白，纯色背景下才好看。
  • 简写把 size 覆盖没：先写 background-size: cover 再写 background: url(...) no-repeat，size 被重置回 auto。size 写进简写（/ cover）或放在简写之后。
  • CSS 里 url 的相对路径基准搞错：相对路径相对的是「CSS 文件自己的位置」，不是 HTML 的位置。图片 404 先检查这个。
  • 渐变写到 background-color 里：渐变是 image，background-color: linear-gradient(...) 无效，要用 background-image 或 background。
  • 移动端滥用 background-attachment: fixed：iOS Safari 上要么无效要么性能糟糕，视差效果改用 transform 或接受静态。

小结

背景由 color、image、position、size、repeat 组合，cover/contain 是最常用的 size；简写里 size 跟在 position 后的斜杠后；渐变是代码生成的图片，色标同位可画硬边界。下一章回到布局本身：display 与文档流。