CSS 颜色与背景

颜色是 CSS 出场率最高的属性之一,背景决定了页面的"质感"。这一篇讲清楚三种颜色格式的取舍、背景属性的全套用法,以及渐变这种让页面瞬间"高大上"的技巧。掌握配色克制原则,页面观感会大幅提升。

1. 三种颜色格式

CSS 里写颜色一共有四种方式,实际工作中前三种最常用。

.box {
  /* === 三种颜色写法 === */

  /* 1. 十六进制:最常用,# 开头,6 位(或 3 位缩写) */
  color: #ff5722;        /* 不透明 */
  color: #f57;           /* 缩写:等价于 #ff5577 */
  color: #ff5722ff;      /* 8 位:最后两位是透明度(00 全透,ff 不透) */

  /* 2. RGB / RGBA:红绿蓝各 0~255,A 是透明度 0~1 */
  color: rgb(255, 87, 34);
  color: rgba(255, 87, 34, 0.8);   /* 80% 不透明 */

  /* 3. HSL / HSLA:色相 0~360、饱和度%、亮度%(调色更直观) */
  color: hsl(14, 100%, 57%);
  color: hsla(14, 100%, 57%, 0.8);

  /* 4. 关键字 */
  color: red;
  color: transparent;   /* 全透明 */
  color: currentColor;  /* 继承当前文字色 */
}

三种格式的取舍:

• 十六进制(#ff5722):最常用。短、好复制、设计软件默认输出。带透明度的 8 位写法(#ff5722aa)越来越流行,现代浏览器全支持。
• RGB / RGBA:语义清晰,调单个颜色分量方便。需要单独控制透明度时首选。
• HSL / HSLA:色相、饱和度、亮度。调色最直观——想"深一点"就把 L 调低,"鲜艳一点"就把 S 调高,不用 RGB 那样瞎试。做主题色系特别好用。
• 关键字:red、transparent、currentColor。前两个简单,currentColor 很巧妙——它会取当前元素的 color 值,做"图标颜色跟随文字"时特别有用。

2. 配色克制原则

新手最容易犯的错:一个页面塞几十种颜色,看起来像调色板爆炸。专业的做法是定一套色板,全站复用:

• 主色:1 个,品牌色,用于按钮、链接、强调。
• 辅色:1~2 个,点缀主色。
• 文字色:2~3 档灰(标题深、正文中、辅助浅)。
• 背景色:2~3 档(主背景、卡片背景、深色区块)。
• 语义色:成功/警告/错误各一(绿/黄/红)。

色板定好后抽成 CSS 变量,全站引用——这样改一个变量全站同步,不会"页面里出现几十种看起来差不多但又不完全一样的灰"。

3. 背景属性全集

背景不只是"涂个色",还能铺图、控制重复、定位、大小。背景相关属性一堆,但每个都简单。

.box {
  /* 背景纯色 */
  background-color: #f5f5f5;

  /* 背景图片 */
  background-image: url('/img/bg.png');

  /* 背景重复:默认 x+y 都重复 */
  background-repeat: no-repeat;     /* 不重复 */
  background-repeat: repeat-x;      /* 只水平重复 */

  /* 背景位置 */
  background-position: center;      /* 居中 */
  background-position: top right;   /* 右上 */
  background-position: 50% 50%;     /* 百分比 */

  /* 背景大小 */
  background-size: cover;           /* 铺满(可能裁剪) */
  background-size: contain;         /* 完整显示(可能留白) */
  background-size: 100px 200px;     /* 指定尺寸 */

  /* 是否固定(视差效果) */
  background-attachment: fixed;     /* 滚动时不跟随 */
  background-attachment: scroll;    /* 默认,跟随滚动 */

  /* 简写:color image repeat position/size */
  background: #f5f5f5 url('bg.png') no-repeat center/cover;
}

重点几个:

• background-size: cover vs contain:cover 铺满容器(可能裁剪图片),contain 完整显示图片(可能留白)。做 hero 大图用 cover 最常见。
• background-position:配合 cover 用,决定图片哪部分露出来。比如人像,设 center top 保证头部不裁掉。
• background-attachment: fixed:背景固定不随滚动——经典的视差效果,但移动端支持差慎用。
• 简写:多个属性可以挤一行,顺序是 color image repeat position/size。

4. 渐变(gradient)

渐变是 CSS 里最容易"提升质感"的特性。一段渐变背景,立刻让按钮、卡片、Hero 区从平庸变精致。渐变分三种:

.box {
  /* 线性渐变:方向 + 颜色列表 */
  background: linear-gradient(to right, #4f8cff, #6a5cff);
  background: linear-gradient(135deg, #4f8cff, #6a5cff);
  background: linear-gradient(to right, red, yellow, green);

  /* 渐变中间位置控制 */
  background: linear-gradient(to right, #4f8cff 0%, #6a5cff 50%, #9b5cff 100%);

  /* 径向渐变:从中心向外发散 */
  background: radial-gradient(circle, #4f8cff, #2c3e50);
  background: radial-gradient(circle at top right, #fff, #000);

  /* 锥形渐变 */
  background: conic-gradient(from 0deg, red, yellow, green, red);
}

• linear-gradient 线性:最常用。第一个参数是方向(to right、135deg),后面跟颜色列表。
• radial-gradient 径向:从中心向外发散,适合做光晕、聚光灯效果。
• conic-gradient 锥形:绕中心旋转,适合做饼图、色环。

配色建议:渐变用相邻色或同色系(如蓝→紫),跨度别太大,否则看起来廉价。也可以在两个颜色之间用百分比控制过渡区。

5. 透明度:opacity vs rgba

让元素半透明有两种方式,效果完全不同,选错了会出 bug。

.box-a {
  opacity: 0.5;    /* 整个元素半透明:包括文字、子元素都会半透 */
}

.box-b {
  /* 只让背景半透明,文字保持清晰 —— 用 rgba */
  background: rgba(0, 0, 0, 0.5);
  color: #fff;     /* 文字 100% 不透明 */
}

区别:opacity 让整个元素(包括文字、子元素)都半透明;而 rgba 只让指定属性(比如背景色)半透明,文字依然清晰。做半透明遮罩层时,几乎都应该用 rgba——否则上面的文字也跟着变淡,看不清。

6. 多重背景

一个元素可以叠多个背景图层,逗号分隔,先写的在上。常用于"渐变 + 图片叠加"。

/* 一个元素可以叠多个背景图层 */
.hero {
  background:
    url('overlay.png') center/cover,    /* 上层 */
    linear-gradient(135deg, #4f8cff, #6a5cff);  /* 下层 */
  /* 多层用逗号分隔,先写的在上 */
}

典型场景:Hero 区背景图上盖一层半透明渐变,让上面的文字更清晰。两层一起写,一个属性搞定。

小结

颜色用三种格式都行,建议十六进制为主、需要透明度时配 rgba、做主题色系时用 hsl;背景属性一堆但每个都简单,核心是 cover 铺图和 position 定位;渐变能瞬间提升质感,但要配色克制。下一篇进入 CSS 的重头戏——Flexbox 弹性布局。

← 上一篇 CSS 文本与字体

下一篇 CSS Flexbox 弹性布局 →