编程语言研究书库
CSS 参考指南

颜色与背景 — 四种写法、两个透明、一对尺寸

颜色与背景 — 四种写法、两个透明、一对尺寸

原书拆成第 11 章(颜色)和第 12 章(背景),合并讲。 两章共同回答: 「怎么把颜色写到元素上」——前景(字)用 color,背景用 background 一组属性; 以及「透明到底透的是什么」。全章围绕三组最易混的概念:HEX/RGB/HSL 三种写法、 alpha 与 opacity 两种透明、cover 与 contain 两种尺寸。

1. 这一章在全书链条里的位置

字体文字(第 08 章)管「字」,这一章管「色」——页面视觉的另一半。 它也是「效果」的前置:下一章的圆角阴影滤镜,全会用到这里的颜色和透明。

2. 顶层全景:前景与背景,写法与透明

        前景(字的颜色)              背景(盒子背后的颜色与图)
              │                              │
  color: <四种写法>              background-color: <四种写法>
                                 background-image: url() 或 渐变(渐变算图!)
                                        │
                                 background-size: cover 还是 contain
                                 background-position / background-repeat
                                 background: 一行简写(有顺序、会复位)

图说:color 只管字;背景是一支「小分队」,简写能把全队一行写完。

书里先把一个总区分立起来:CSS 区分前景(内容,通常是文字)和背景(内容背后的盒子), color 管前者,background-color 管后者1。最简例子是一个红色警报条: 白字(color: white)红底(background-color: red)。

3. 核心原理:颜色的四种写法

前三种是同一件事的三种记法;第四种是另一套坐标系。

关键字、HEX、RGB:一种颜色的三个影子

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

三行都是纯红。HEX(十六进制)是最常见的网页记法:# 加三对字符,每对是 0–9 和 A–F, 00 最暗、FF 最亮;三对分别管红、绿、蓝。#ff5733 是鲜艳的橙;#000 是 #000000(黑)的缩写2。 RGB 把三对十六进制摊开来写:三个 0–255 的数,同样按红绿蓝排队3。 屏幕是发光体,红绿蓝三束光叠出一切颜色——这套加法混色就是 RGB 的物理根据4。

一个高频笔误:HEX 忘了写 #,浏览器会把 ff0000 当成无效声明直接忽略5。

HSL:给人看的坐标系

background-color: hsl(200, 100%, 50%);  /* 亮天蓝 */
background-color: hsl(200, 100%, 40%);  /* 同一个蓝,深一档 */

三个分量各管一件事:色相(hue)是色轮上的角度,0° 红、120° 绿、240° 蓝,200 是蓝; 饱和度(saturation)0% 是灰、100% 最艳;亮度(lightness)0% 黑、100% 白、50% 是本色的正常亮度6。 HSL 的优势不在更准,而在可调——「同一个颜色深一点」在 RGB/HEX 下要三个数一起重算, 在 HSL 下只动一个数(50% → 40%)。书里给的设计系统玩法就是把色相、饱和度存成变量, 一排变体只改亮度7。

主线例子:同一个按钮,悬停变深

.button   { background-color: hsl(200, 100%, 50%); }
.button:hover { background-color: hsl(200, 100%, 40%); }

悬停只把亮度拧低 10%,色相、饱和度一字未动——出来的就是「同一个蓝,深了一档」8。 这是 HSL 的招牌动作,也是书里第 11 章自带的例子。

4. 核心原理:透明——alpha 与 opacity 是两回事

alpha 通道是颜色的第四个分量,0 全透到 1 实:rgba(0, 0, 0, 0.5) 是五成透的黑9。 现代写法还能用空格分隔:rgb(0 0 0 / 60%)10。

opacity 第 05 章见过:作用于整个元素的透明度。两者看着像,分工完全不同:

只透背景字跟着透吗
background-color: rgba(0,0,0,0.5)是不透,字保持实心
opacity: 0.5是透,整个元素五成透

书里把这条列为常见错误:想要「半透明底 + 可读的字」,必须用 rgba/hsla 写在背景上, 不能用 opacity——opacity 会把字也透明掉11。封面式叠加层就是这个模式的实战: 深色半透明底托住白字,盖在图片上保证可读12。

5. 核心原理:背景小分队

background-color 只是底色;背景的主力是图——而且有一个关键认知转换: 渐变在 CSS 里算图,不是颜色13。linear-gradient(to bottom, transparent, black) 是 background-image 的合法值,不能写进 background-color。

五名队员

.hero {
  background-image: url('landscape.jpg'), linear-gradient(to bottom, transparent, black);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
  • background-image:一张或多张图(逗号分隔,先写的在上层)14;
  • background-size:auto(原尺寸)/ cover / contain / 具体值;
  • background-position:从哪个点开始画,center 是日常答案,默认左上角;
  • background-repeat:默认是平铺——小图标不声明 no-repeat 会铺成壁纸15;
  • background 简写:一行写全队,顺序大致是 background: [颜色] [图] [平铺] [位置] / [尺寸];——尺寸必须跟在位置后面、用斜杠隔开16。

主线例子:cover 与 contain 的同一道题

输入:一张 400×300 的图,装进 200×200 的方盒子。

cover   → 短边对齐:缩到 267×200,左右各裁约 33px   铺满,缺的部分裁掉
contain → 长边对齐:缩到 200×150,上下各留 25px     完整,多的部分留白

图说:cover 保「满」,contain 保「全」。300×300 的正方形图两者结果相同。

cover 把图放大到刚好盖住盒子,多出来的边裁掉;contain 把图缩到刚好装进盒子, 装不满的边留白17。响应式头图(满屏 banner)的标准三件套就是 background-size: cover; background-position: center; background-repeat: no-repeat;—— 裁也裁边上、主体始终在正中18。

简写有两条书里点名的坑:尺寸忘加斜杠位置就错位;简写会把没写的子属性复位—— 前面分着写的 background-size,后面一句 background: red; 就给你抹回默认19。 另一个路径坑:url() 里的相对路径相对的是 CSS 文件,不是 HTML 文件20。

6. 作者的判断与证据

  • 「HSL 更易人类调整,设计师偏好」——定位断言,理由(三个分量各管一件事)成立46。
  • 「用 rgba/hsla 而不是 opacity 做半透明底」——常见错误清单里的硬建议11。
  • 「忘记 # 是最常见错误之一」——经验断言5。
  • 「文字压图必须留底色兜底」——书里一条很老练的提示:图加载失败时字仍可读21。
  • 证据类型同全书:经验断言 + 最小例子。

7. 边界与局限

  • 颜色一章没讲 color-mix()、相对颜色语法(hsl(from …))等 2023 年后的新写法, 也没讲 OKLCH 色域——以 2026 年的「现代」标准看偏保守。
  • 没讲 background-attachment: fixed 的视差用法、多背景合成的层叠顺序细节 (只给了「逗号分隔、先写在上」一句)。
  • 渐变只提了 linear 一族;径向渐变(radial-gradient)、锥形渐变(conic-gradient)只在语法处露了个名, 没有展开。

判断(我们的,不是书里的): 「渐变算图不算色」是这两章里最反直觉、也最值得先讲的事实—— 不知道它,background: linear-gradient(…) 写进 color 位置的报错能查一晚上。 本书把它放在「核心概念」第二条,位置给得对。 如果错,会错在: 「HSL 是配色趁手工具」这条在印刷/广色域场景下不成立 (HSL 的亮度不是感知亮度,等亮度操作在屏幕上不均匀)——设计系统越来越转向 OKLCH, 本书完全没提这个动向,读者把它当终点会落后半代。

8. 可带走的

  1. 四种写法是一件事的多种记法:HEX 最常见,RGB 摊开来写,HSL 最好调26。
  2. HSL 调色配方:同色系变体 = 色相、饱和度不动,只动亮度(50% → 40%)8。
  3. 半透背景 + 实字 = rgba/hsla;opacity 会把字一起透明掉11。
  4. 渐变是 background-image,不是颜色13。
  5. cover 保满(裁边),contain 保全(留白);响应式头图三件套:cover + center + no-repeat18。
  6. 背景图默认平铺,不想铺一定写 no-repeat15。
  7. 简写 background 会复位没写的子属性;url() 路径相对 CSS 文件1920。

9. 原文地图

主题原书章原文位置
前景 vs 背景Chapter 11: Color Referencetext/12-ch01-1-chapter-overview.txt:19(搜「Foreground vs. Background」)
RGB 是光的三原色同上text/12-ch01-1-chapter-overview.txt:21(搜「Additive Color」)
HSL 是人类可读模型同上text/12-ch01-1-chapter-overview.txt:23(搜「Human-Readable」)
alpha 通道同上text/12-ch01-1-chapter-overview.txt:25(搜「Alpha Channel」)
HEX 语法与缩写同上text/12-ch01-1-chapter-overview.txt:48(搜「RRGGBB」)
HSL 三个分量同上text/12-ch01-1-chapter-overview.txt:83(搜「0=red」)
悬停变深示例同上text/12-ch01-1-chapter-overview.txt:92(搜「A bright sky blue」)
rgba vs opacity 的坑同上text/12-ch01-1-chapter-overview.txt:139(搜「not the opacity property」)
封面叠加层同上text/12-ch01-1-chapter-overview.txt:108(搜「Tinted Overlay」)
渐变算图Chapter 12: Background Propertiestext/13-ch01-1-chapter-overview.txt:23(搜「Gradients as Images」)
多背景逗号分层同上text/13-ch01-1-chapter-overview.txt:43(搜「separated by commas」)
cover 与 contain 定义同上text/13-ch01-1-chapter-overview.txt:45(搜「background-size」)
简写顺序与斜杠同上text/13-ch01-1-chapter-overview.txt:109(搜「Shorthand」);:121 搜「forward slash」
简写复位坑同上text/13-ch01-1-chapter-overview.txt:154(搜「resets」)
url() 相对 CSS 文件同上text/13-ch01-1-chapter-overview.txt:148(搜「relative to the CSS file」)
文字压图留底色同上text/13-ch01-1-chapter-overview.txt:152(搜「fallback background-color」)

Footnotes

  1. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:19,搜「Foreground vs. Background」)。原文:「CSS distinguishes between the color of the content (usually text) and the color of the box behind that content.」 ↩

  2. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:48,搜「RRGGBB」)。原文:「Syntax: #RRGGBB or #RGB」「Values: 0-9 and A-F (0 is dark, F is bright).」 ↩ ↩2

  3. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:57,搜「RGB and RGBA」)。原文:「Values: 0-255 for colors; 0-1 for alpha (transparency).」 ↩

  4. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:21,搜「Additive Color」)。原文:「Screens use light to create colors. By mixing Red, Green, and Blue at different intensities, you can create millions of colors.」 ↩ ↩2

  5. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:135,搜「Forgetting the Hash」)。原文:「In HEX codes, forgetting the # (e.g., ff0000 instead of #ff0000) will cause the browser to ignore the style.」 ↩ ↩2

  6. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:83,搜「0=red」;:85 搜「0% is gray」)。原文三个分量:Hue 0–360(0=red, 120=green, 240=blue);Saturation 0–100%(0% is gray, 100% is full color);Lightness 0–100%(0% is black, 100% is white, 50% is "normal")。 ↩ ↩2 ↩3

  7. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:121,搜「HSL for Design Systems」)。原文:「HSL makes it easy to create different shades of the same color by only changing the 'Lightness' value.」示例把 --primary-h、--primary-s 存成变量,三个变体只改亮度(90% / 50% / 20%)。 ↩

  8. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:92,搜「A bright sky blue」)。原文示例:hsl(200, 100%, 50%) 是「A bright sky blue」,悬停改 hsl(200, 100%, 40%) 注释为「Same color, just darker」。 ↩ ↩2

  9. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:57,搜「rgba」)。原文语法:rgba(red, green, blue, alpha)。 ↩

  10. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:65,搜「space-separated」)。原文:「Modern CSS also allows space-separated syntax: rgb(255 87 51 / 0.5).」 ↩

  11. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:139,搜「not the opacity property」)。原文:「If you want a semi-transparent background but want the text to remain solid and readable, use rgba() or hsla() on the background, not the opacity property on the whole container.」 ↩ ↩2 ↩3

  12. 出处:「Chapter 11: Color Reference」(text/12-ch01-1-chapter-overview.txt:108,搜「Tinted Overlay」)。原文:「Often used for placing text over images to ensure readability.」 ↩

  13. 出处:「Chapter 12: Background Properties」(text/13-ch01-1-chapter-overview.txt:23,搜「Gradients as Images」)。原文:「In CSS, linear and radial gradients are technically treated as background-image values, not colors.」 ↩ ↩2

  14. 出处:「Chapter 12: Background Properties」(text/13-ch01-1-chapter-overview.txt:43,搜「separated by commas」)。原文:「Multiple backgrounds are separated by commas.」 ↩

  15. 出处:「Chapter 12: Background Properties」(text/13-ch01-1-chapter-overview.txt:150,搜「tile」)。原文:「By default, images repeat. If you use a small icon as a background, it will tile across the whole element unless you set background-repeat: no-repeat.」 ↩ ↩2

  16. 出处:「Chapter 12: Background Properties」(text/13-ch01-1-chapter-overview.txt:109,搜「Shorthand」;:121 搜「forward slash」)。原文语法行 background: [color] [image] [repeat] [attachment] [position] / [size];,并注:「If you include size, it must come after position, separated by a forward slash /.」 ↩

  17. 出处:「Chapter 12: Background Properties」(text/13-ch01-1-chapter-overview.txt:45,搜「background-size」)。原文:cover「Scales the image to be as large as possible so that the background area is completely covered (some parts of the image may be clipped)」;contain「both its width and height can fit inside the content area (no clipping, but may leave empty space)」。算例中的 400×300 图与 200×200 盒是为演示设的数。 ↩

  18. 出处:「Chapter 12: Background Properties」(text/13-ch01-1-chapter-overview.txt:125,搜「Full-Screen Hero」)。原文 hero 模式四行:height: 100vh; background-image: url('hero-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;。 ↩ ↩2

  19. 出处:「Chapter 12: Background Properties」(text/13-ch01-1-chapter-overview.txt:154,搜「resets」)。原文:「Be careful when using the shorthand background property; it resets any specific background properties defined earlier in the cascade to their default values.」 ↩ ↩2

  20. 出处:「Chapter 12: Background Properties」(text/13-ch01-1-chapter-overview.txt:148,搜「relative to the CSS file」)。原文:「Ensure your url() path is relative to the CSS file, not the HTML file.」 ↩ ↩2

  21. 出处:「Chapter 12: Background Properties」(text/13-ch01-1-chapter-overview.txt:152,搜「fallback background-color」)。原文:「If you place text over a background image, always set a fallback background-color. If the image fails to load, the text should still be readable against the background color.」 ↩

字体与文字 — 从字族回退到行高

Previous Page

圆角、阴影与滤镜 — 立体感的来源与代价

Next Page

On this page

颜色与背景 — 四种写法、两个透明、一对尺寸1. 这一章在全书链条里的位置2. 顶层全景:前景与背景,写法与透明3. 核心原理:颜色的四种写法关键字、HEX、RGB:一种颜色的三个影子HSL:给人看的坐标系主线例子:同一个按钮,悬停变深4. 核心原理:透明——alpha 与 opacity 是两回事5. 核心原理:背景小分队五名队员主线例子:cover 与 contain 的同一道题6. 作者的判断与证据7. 边界与局限8. 可带走的9. 原文地图Footnotes