用 CSS 创建令人惊叹的棋盘背景

简介

在这个实验中，你将探索 CSS 编程，以创建一个棋盘背景图案。你将学习如何使用 CSS 渐变技术来设计一个视觉上吸引人的棋盘图案，该图案可用于提升各种 Web 项目的效果。棋盘图案是一种经典的设计元素，由排列成网格状的交替颜色方块组成，类似于国际象棋棋盘。

通过完成这个实验，你将获得使用 CSS 背景、渐变和图案创建的实践经验，这些技能对于现代 Web 设计非常有价值。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个中级级别的实验，完成率为 80%。获得了学习者 100% 的好评率。

了解项目文件

在开始创建棋盘图案之前，让我们先查看一下虚拟机（VM）中提供的项目文件。

在文件资源管理器面板中点击 index.html 文件，将其在编辑器中打开。

初始的 HTML 文件应该如下所示：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- You will add your code here -->
  </body>
</html>

现在在编辑器中打开 style.css 文件。

初始的 CSS 文件应该为空，或者只包含极少的样式：

/* CSS styles will be added here */

让我们启动开发服务器，查看网页的初始状态。

要在浏览器中查看你的网页，请点击编辑器右下角的“Go Live”按钮。这将启动一个实时服务器，并在 Web 8080 标签页中显示你的网页。

此时你应该会看到一个空白页面，因为我们还没有添加任何内容或样式。

创建 HTML 结构

既然我们已经了解了项目文件，接下来让我们为棋盘图案创建 HTML 结构。

再次在编辑器中打开 index.html 文件。
我们需要为棋盘图案添加一个容器元素。在 <body> 标签内，将注释替换为一个类名为 "checkerboard" 的 <div> 元素：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="checkerboard"></div>
  </body>
</html>

按下 Ctrl+S 组合键或点击“文件” > “保存”来保存 index.html 文件。
现在，让我们添加一些基本的 CSS 来定义棋盘的尺寸。打开 style.css 文件并添加以下代码：

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
}

这段 CSS 代码的作用如下：

将棋盘的宽度和高度设置为 240 像素
将背景颜色设置为白色 (#fff)

保存 style.css 文件。
刷新 Web 8080 标签页以查看更改。

此时你应该会看到一个宽高均为 240 像素的白色方块。这将是我们绘制棋盘图案的画布。

创建第一个渐变

现在我们将开始使用 CSS 渐变来创建棋盘图案。让我们添加第一个线性渐变，以创建图案的一部分。

了解 CSS 线性渐变

CSS 线性渐变允许你在一条直线上创建两种或多种颜色之间的平滑过渡。linear-gradient() 函数接受一个角度和一系列颜色停止点作为参数。我们将使用这种技术来创建棋盘方块。

请按照以下步骤操作：

打开 style.css 文件。
让我们修改 .checkerboard 类，以包含第一个线性渐变：

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(
    45deg,
    #000 25%,
    transparent 25%,
    transparent 75%,
    #000 75%,
    #000
  );
  background-size: 60px 60px;
}

让我解释一下这个渐变的作用：

45deg 指定了渐变的角度
#000 25% 在可用空间的 0% 到 25% 范围内创建黑色
transparent 25% 从 25% 处开始创建透明颜色
transparent 75% 保持透明颜色直到 75%
#000 75% 在 75% 处过渡回黑色，并延续到末尾
background-size: 60px 60px 设置每个重复渐变单元的大小

保存 style.css 文件。
刷新 Web 8080 标签页以查看更改。

此时你应该会看到一个图案开始形成，但它还不是一个完整的棋盘。第一个渐变只创建了图案的一部分。在下一步中，我们将添加第二个渐变来完成整个棋盘。

完成棋盘图案

现在，让我们添加第二个线性渐变，以完成棋盘图案，并使其在整个元素上重复显示。

再次打开 style.css 文件。
修改 .checkerboard 类，添加第二个线性渐变，以创建交替的图案：

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image:
    linear-gradient(
      45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    ),
    linear-gradient(
      -45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    );
  background-size: 60px 60px;
  background-repeat: repeat;
}

我们添加的内容如下：

第二个 linear-gradient()，它与第一个类似，但角度为 -45deg，用于创建交替的图案
background-repeat: repeat 属性确保图案在整个元素上重复显示

这两个不同角度的渐变组合在一起，形成了经典的棋盘图案。第一个渐变创建了一组对角方块，而第二个渐变创建了另一组方块，填补了空白。

保存 style.css 文件。
刷新 Web 8080 标签页，查看最终结果。

此时，你应该会看到一个完整的棋盘图案，黑白方块交替出现。该图案应在整个 240px×240px 的元素上重复显示。

图案的工作原理

棋盘效果的实现方式如下：

使用两个角度相反的线性渐变（45deg 和 -45deg）
每个渐变在角落处创建黑色方块图案
透明区域使白色背景得以显示
background-size 属性控制图案中每个方块的大小
background-repeat 属性使图案在整个元素上重复显示

这种技术展示了 CSS 渐变在创建复杂图案时的强大功能，无需使用图像文件，从而加快了加载速度，并提高了可扩展性。

总结

恭喜你完成了「棋盘背景图案」实验。在这个实验中，你：

创建了一个 HTML 结构来承载棋盘图案
学习了如何使用 CSS 线性渐变来创建图案
组合了不同角度的多个渐变，以实现棋盘效果
应用了尺寸和重复属性来完善图案

这个棋盘图案展示了一种强大的 CSS 技术，可应用于许多网页设计项目。你所学到的方法——使用渐变而非图像——能加快网页加载速度，并提高网页的可扩展性。

现在，你可以运用这些知识，使用 CSS 渐变来创建其他图案和视觉效果。你可以考虑进行以下尝试：

为棋盘使用不同的颜色
改变方块的大小
使用不同的渐变角度
创建其他几何图案，如条纹或圆点

你在这个实验中学到的技术，为使用纯 CSS 创建复杂的背景图案奠定了基础。