LabEx
登录免费加入

在 CSS 中应用背景样式

CSSBeginner
立即练习

介绍

在本实验中，你将学习如何使用 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 文件，继续之前的示例。

示例图片位于 ~/project 目录中。

现在，使用以下内容更新 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.jpg"), 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>

small-pattern.jpg 位于 ~/project 目录中。

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

  1. 带有叠加效果的多个背景：

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

  2. 图层化背景：

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

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

总结

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

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

相关 CSS 课程
CSS 入门教程

CSS 入门教程

cssweb-development
构建一个井字棋网页应用

构建一个井字棋网页应用

javascriptweb-development
创建打地鼠网页游戏

创建打地鼠网页游戏

javascriptweb-development