第 3 讲：CSS 中的颜色和背景

在本次讲座中，我们将探讨如何使用颜色和背景使您的网站具有视觉吸引力。了解如何有效地应用颜色和背景是创建引人入胜且美观的网页设计的关键。

在 CSS 中使用颜色

CSS 允许您以多种方式指定颜色，包括使用颜色名称、十六进制值、RGB、RGBA、HSL 和 HSLA。

1.颜色名称

CSS 提供了多种预定义的颜色名称。

• 例子：

  h1 {
    color: red;
  }

这会将所有

元素的文本颜色设置为红色。

2.十六进制颜色

十六进制代码是数字和字母的六位组合，由红色、绿色和蓝色 (RGB) 值的组合定义。

• 例子：

  p {
    color: #3498db; /* A shade of blue */
  }

3. RGB 和 RGBA

RGB 代表红、绿、蓝。 RGBA 添加了一个 Alpha 通道以实现不透明度。

• 示例（RGB）：

  div {
    color: rgb(255, 99, 71); /* Tomato color */
  }

• 示例（RGBA）：

  div {
    background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
  }

4. HSL 和 HSLA

HSL 代表色相、饱和度和亮度。 HSLA 包括一个 Alpha 通道。

• 示例（HSL）：

  h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }

• 示例（HSLA）：

  h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }

应用背景

CSS 中的背景可以通过向元素添加颜色、图像、渐变等来增强设计。

1.背景颜色

您可以使用background-color属性设置任何HTML元素的背景颜色。

• 例子：

  body {
    background-color: #f4f4f4; /* Light gray background */
  }

2.背景图片

CSS 允许您使用图像作为背景。

• 例子：

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

这将在带有类横幅的元素上设置背景图像。图像将覆盖整个区域并居中。

3.背景重复

控制背景图像是否水平重复、垂直重复或根本不重复。

• 例子：

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }

4.背景位置

您可以控制背景图片的起始位置。

• 例子：

  .header {
    background-image: url('header.jpg');
    background-position: top right;
  }

5.背景渐变

渐变允许您在两种或多种颜色之间创建平滑过渡。

• 示例（线性渐变）：

  .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from left to right */
  }

• 示例（径向渐变）：

  .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Circular gradient */
  }

实际示例：

让我们通过一个使用颜色、背景图像和渐变的示例将这些概念付诸实践。

HTML:

  
Welcome to My Website
  
This is a simple example of using colors and backgrounds in CSS.

CSS:

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}

在此示例中：

• 主体背景色为浅灰色。

• 文本为深蓝色。

• .content div 的背景图像带有深色渐变叠加层，使白色文本脱颖而出。

• 文本是浅色以补充背景。

练习

1. 创建一个包含标题、段落和 div 的网页。
2. 尝试使用不同的颜色格式（十六进制、RGB、HSL）来设计文本和背景样式。
3. 将背景图像应用到某个部分并调整其位置、大小和重复属性。
4. 创建具有线性或径向渐变背景的部分。

下一步： 在下一讲中，我们将介绍 CSS 中的 排版和字体样式，您将在其中学习如何选择和自定义字体以增强网站的可读性并上诉。到时见！