freeCodeCamp Basic CSS 课程：用 background-color 属性为 div 元素设置背景色

本篇基于 freeCodeCamp 课程中的挑战文件 Give a Background Color to a div Element，完整讲解如何用 CSS 的 background-color 属性为元素设置背景色：包括属性的正确写法、在 CatPhotoApp 实战页面中的标准解法，以及该挑战三条测试断言分别验证了什么，帮助读者既掌握这一 CSS 基础知识点，又理解课程平台是如何对答案做自动化校验的。

课程定位：basic-css 块中的第 13 个挑战

该挑战属于 freeCodeCamp 课程结构中的 basic-css 块。从 块配置文件 可以看到，basic-css 块按 challengeOrder 排列了 46 个挑战，本挑战的 id 为 bad87fed1348bd9aede07836，位于：

• 前一个挑战："Make Circular Images with a border-radius"（用 border-radius 制作圆形图片）
• 本挑战："Give a Background Color to a div Element"
• 后一个挑战："Set the id of an Element"

也就是说，课程在这里刚讲完边框与圆角（border-color、border-width、border-style、border-radius），自然过渡到"背景"主题；之后再进入 id 选择器、padding/margin 以及更深入的十六进制与 RGB 颜色表示。该块的 helpCategory 为 HTML-CSS，blockLayout 为 legacy-challenge-list，即采用经典挑战列表界面呈现。

从挑战文件的 front-matter 看，challengeType: 0。对照 challenge-types.ts 中的定义，类型 0 对应 html，其视图为 classic（经典三栏编辑器界面），提交方式为 tests（自动运行断言判题）。该取值范围也由 挑战 JSON Schema 约束：challengeType: Joi.number().min(0).max(33).required()，challengeType 0（html 类）允许 description 为空字符串，但本挑战的说明部分仍是完整段落。

核心知识点：background-color 属性

文档原文给出的知识点只有一句话，但这是 CSS 背景系列属性的起点：

You can set an element's background color with the background-color property.（可以用 background-color 属性设置元素的背景色。）

文档给出的示例是：如果一个元素的背景色想设为 green，就在 <style> 元素内写：

.green-background {
  background-color: green;
}

要点有三：

1. 属性名是 background-color（带连字符），不要写成 backgroundColor，那是 JS 操作 style 对象时才用的驼峰写法；
2. 取值这里使用 CSS 命名颜色 green。CSS 支持约 140 个命名颜色关键字，本挑战会用到其中的 silver；
3. 作用对象是通过类选择器选中的元素，类名前后不带 .，选择器中带 .。

任务要求：创建 silver-background 类

文档指令（--instructions--）原文：

Create a class called silver-background with the background-color of silver. Assign this class to your div element.

即：在 <style> 中创建一个名为 silver-background 的类，将 background-color 设为 silver；并把该类应用到页面的 div 元素上。

起始代码（seed）

挑战的起始代码是一个完整的 CatPhotoApp 页面，包含 <link> 引入的 Lobster 字体、<style> 中已有的若干样式（.red-text、h2、p、.thick-green-border、.smaller-image）、标题、带类名的图片、一个还没有任何类的 <div>（内容分两组列表：Things cats love: 的无序列表和 Top 3 things cats hate: 的有序列表），以及一个提交猫咪照片的 <form>。起始代码中与该任务直接相关的部分是：

<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>
...
  <div>
    <p>Things cats love:</p>
    <ul>
      <li>catnip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

标准答案（diff）

官方完整解法见同一文件的 --solutions-- 部分，相对于 seed 只有两处改动：

1. 在 <style> 末尾（.smaller-image 之后）新增：

  .silver-background {
    background-color: silver;
  }

2. 给 div 添加类名：

  <div class="silver-background">

其余内容（字体引入、既有样式、图片、表单）保持原样。

三条测试断言分别验证什么

课程的提示（--hints--）部分同时就是判题逻辑，共三条断言，从 DOM、计算样式、源码文本三个层面校验答案：

1. div 元素应带有 silver-background 类

assert.isTrue(document.querySelector('div').classList.contains('silver-background'));

这条只检查 HTML 层面：页面中第一个 div 的 class 列表里必须包含 silver-background。

2. div 的实际背景色应为银色

const div = document.querySelector('div');
const backgroundColor = window.getComputedStyle(div)['background-color'];
assert.strictEqual(backgroundColor, 'rgb(192, 192, 192)');

注意这里期望值是 rgb(192, 192, 192) 而不是 silver。原因是 getComputedStyle 返回的是浏览器解析后的计算值：CSS 命名颜色 silver 在颜色规范中对应十六进制 #C0C0C0，即红/绿/蓝各为 192 的灰度色。所以无论你写 silver、#C0C0C0 还是 rgb(192, 192, 192)，只要解析结果一致，这条断言都能通过；而本任务的判分口径以 rgb 计算值为准。

3. style 元素中应存在对应的类定义

assert.match(
  __helpers.removeHtmlComments(code),
  /\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/
);

这条是对源码文本做正则匹配，要求 <style> 中存在形如：

.silver-background { background-color: silver; }

的结构——允许属性与值之间任意空白（\s*），末尾分号可选（;?）。可以看到正则中要求值必须是 silver 关键字，这与断言 2 的计算值校验互相补充：前者约束"写法"，后者约束"效果"。另外 __helpers.removeHtmlComments(code) 会先剔除 HTML 注释再匹配，说明课程平台允许你在编辑器里写注释而不影响判题。

复现与进一步探索

• 查看挑战原始内容（描述、指令、提示、seed 与 solutions）：bad87fed1348bd9aede07836.md；
• 查看该块全部挑战的顺序与布局配置：basic-css.json；
• 了解 challengeType 各数值（0=html 等）与视图/提交方式的映射：challenge-types.ts；
• 了解挑战元数据（challengeType、helpCategory、blockLayout 等字段）如何被校验：challenge-schema.js。

学完本挑战后，同一块中紧随其后的 "Use Hex Code for Specific Colors"、"Use RGB values to Color Elements"（见 basic-css.json 中的 challengeOrder）会把你从"命名颜色"带入十六进制与 RGB 两种更精确的取色方式，而本挑战中 rgb(192, 192, 192) 这个断言值正是这些后续知识点的预先铺垫。