LabEx
登录免费加入

应用 CSS 背景样式

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文，您可以 切换至英文原版

介绍

在本实验中，你将学习如何使用 CSS 应用高级背景样式，重点是通过颜色和图像处理来增强网页设计。实验涵盖了为 HTML 元素设置背景颜色、添加和调整背景图像大小、控制图像定位和重复，以及结合多种背景属性以创建视觉上吸引人的网页布局等关键技术。

通过实际的动手示例，你将探索使用命名颜色、十六进制代码和 RGB 函数指定背景颜色的不同方法，并学习如何通过精确的尺寸和定位技术来添加背景图像。在本实验结束时，你将掌握使用 CSS 背景属性创建更具动态性和吸引力的网页设计的实用技能。

为 HTML 元素设置背景颜色

在这一步中，你将学习如何使用 CSS 为 HTML 元素设置背景颜色。背景颜色是通过为不同元素添加颜色来增强网页视觉设计的基本方法。

首先，让我们创建一个 HTML 文件来演示背景颜色样式。打开 WebIDE，在 ~/project 目录下创建一个名为 styles.html 的新文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Color Example</title>
    <style>
      /* We'll add our CSS here */
    </style>
  </head>
  <body>
    <div class="box1">First Box</div>
    <div class="box2">Second Box</div>
    <p class="paragraph">This is a paragraph with a background color.</p>
  </body>
</html>

现在，让我们添加一些 CSS 来为不同元素设置背景颜色。更新 HTML 文件中的 <style> 部分：

.box1 {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 10px;
}

.box2 {
  background-color: #ff5733;
  color: white;
  padding: 20px;
  margin: 10px;
}

.paragraph {
  background-color: rgb(200, 230, 255);
  padding: 15px;
}

在这个示例中，我们演示了三种指定背景颜色的方法：

  1. 命名颜色 (blue)
  2. 十六进制颜色代码 (#FF5733)
  3. RGB 颜色函数 (rgb(200, 230, 255))

保存文件并在网页浏览器中打开，查看应用到元素上的不同背景颜色。

添加背景图像并控制尺寸

在这一步中，你将学习如何为 HTML 元素添加背景图像，并使用 CSS 控制其尺寸。我们将继续基于之前的示例，修改 ~/project 目录下的 styles.html 文件。

首先，你需要下载一个示例图像。在终端中使用以下命令：

wget https://labex.io/courses/images/background-sample.jpg -O ~/project/background-sample.jpg

现在，使用以下内容更新 styles.html 文件：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Sizing</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
      }

      .cover-background {
        background-image: url("background-sample.jpg");
        background-size: cover;
      }

      .contain-background {
        background-image: url("background-sample.jpg");
        background-size: contain;
      }

      .custom-size-background {
        background-image: url("background-sample.jpg");
        background-size: 200px 150px;
      }
    </style>
  </head>
  <body>
    <div class="image-container cover-background">
      Cover: Fills entire container
    </div>
    <div class="image-container contain-background">
      Contain: Fits entire image
    </div>
    <div class="image-container custom-size-background">
      Custom Size: 200x150 pixels
    </div>
  </body>
</html>

这个示例演示了三种不同的背景图像尺寸控制方法：

  1. background-size: cover; - 缩放图像以覆盖整个容器
  2. background-size: contain; - 缩放图像以完全适应容器
  3. background-size: 200px 150px; - 为背景图像设置特定的像素尺寸

当你在浏览器中打开这个 HTML 文件时，你将看到三种不同的背景图像尺寸控制技术。

定位背景图像

在这一步中，你将学习如何使用 CSS 控制背景图像的定位。我们将继续修改 ~/project 目录下的 styles.html 文件，以演示不同的背景定位技术。

使用以下内容更新 styles.html 文件：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Positioning</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .top-left {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: top left;
      }

      .center {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: center;
      }

      .bottom-right {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: bottom right;
      }

      .custom-position {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: 20% 80%;
      }
    </style>
  </head>
  <body>
    <div class="image-container top-left">Top Left Position</div>
    <div class="image-container center">Center Position</div>
    <div class="image-container bottom-right">Bottom Right Position</div>
    <div class="image-container custom-position">Custom Position (20% 80%)</div>
  </body>
</html>

这个示例演示了四种不同的背景图像定位方法：

  1. background-position: top left; - 将图像定位在左上角
  2. background-position: center; - 将图像居中于容器内
  3. background-position: bottom right; - 将图像定位在右下角
  4. background-position: 20% 80%; - 使用百分比值进行自定义定位

当你在浏览器中打开这个 HTML 文件时，你将看到不同的定位值如何影响背景图像的放置。

控制背景图像重复

在这一步中，你将学习如何使用 background-repeat CSS 属性控制背景图像的重复。我们将继续修改 ~/project 目录下的 styles.html 文件，以演示不同的重复技术。

使用以下内容更新 styles.html 文件：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Repetition</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .repeat {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat;
      }

      .repeat-x {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-x;
      }

      .repeat-y {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-y;
      }

      .no-repeat {
        background-image: url("background-sample.jpg");
        background-size: 200px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container repeat">Repeat (Default)</div>
    <div class="image-container repeat-x">Repeat X (Horizontal)</div>
    <div class="image-container repeat-y">Repeat Y (Vertical)</div>
    <div class="image-container no-repeat">No Repeat</div>
  </body>
</html>

这个示例演示了四种不同的背景图像重复技术：

  1. background-repeat: repeat; - 图像在水平和垂直方向上重复（默认）
  2. background-repeat: repeat-x; - 图像仅在水平方向上重复
  3. background-repeat: repeat-y; - 图像仅在垂直方向上重复
  4. background-repeat: no-repeat; - 防止图像重复

当你在浏览器中打开这个 HTML 文件时，你将看到不同的重复值如何影响背景图像的显示。

组合多个背景属性

在这一步中，你将学习如何组合多个背景属性，以创建更复杂和有趣的背景设计。我们将修改 ~/project 目录下的 styles.html 文件，以演示高级的背景样式技术。

使用以下内容更新 styles.html 文件：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Background Properties</title>
    <style>
      .image-container {
        width: 600px;
        height: 400px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
        padding: 20px;
      }

      .multiple-backgrounds {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
          ), url("background-sample.jpg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      .layered-backgrounds {
        background-image: url("small-pattern.png"), linear-gradient(to right, #ff6b6b, #4ecdc4);
        background-size:
          100px 100px,
          cover;
        background-position:
          top left,
          center;
        background-repeat: repeat, no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container multiple-backgrounds">
      Overlay Background with Image
    </div>
    <div class="image-container layered-backgrounds">
      Layered Background with Pattern and Gradient
    </div>
  </body>
</html>

首先，下载一个小图案图像：

wget https://labex.io/courses/images/small-pattern.png -O ~/project/small-pattern.png

这个示例演示了两种高级背景技术：

  1. 带有叠加的多重背景：

    • 使用线性渐变创建半透明叠加层
    • 将渐变与背景图像结合
    • 应用一致的尺寸、定位和重复

  2. 分层背景：

    • 将重复的图案图像与线性渐变结合
    • 为每个背景层使用不同的尺寸和定位

当你在浏览器中打开这个 HTML 文件时，你将看到多个背景属性如何创建复杂且视觉上引人注目的设计。

总结

在本实验中，参与者通过全面的逐步方法学习了如何在 CSS 中应用背景样式。实验涵盖了增强网页设计的基本技术，包括使用命名颜色、十六进制代码和 RGB 函数等不同方法设置背景颜色，以及探索背景图像的操作。

通过实践练习，演示了如何为 HTML 元素添加背景图像，控制其尺寸、定位和重复，以及组合多个背景属性。通过动手示例，学习者掌握了使用 CSS 创建视觉吸引力和动态网页背景的各种样式技术的实用技能。

相关 CSS 课程
CSS 快速入门

CSS 快速入门

CSS
初级
构建一个井字棋网页应用

构建一个井字棋网页应用

HTMLCSSJavaScript
初级
创建打地鼠网页游戏

创建打地鼠网页游戏

HTMLCSSJavaScript
初级
OSZAR »