当前位置：首页 > article >正文

第4章：颜色和背景 --[CSS零基础入门]

article 2025/1/2 3:42:28

在 CSS 中，颜色和背景属性是用于美化网页元素的重要工具。你可以通过多种方式定义颜色，并且可以设置元素的背景颜色、图像、渐变等。以下是关于如何在 CSS 中使用颜色和背景的一些关键点和示例。

1.颜色表示法

当然！以下是使用不同颜色表示法的 CSS 示例，包括 RGB、RGBA、HSL、HSLA 和十六进制颜色值。每种方法都有其特点和适用场景。

1. 十六进制颜色值

十六进制颜色值以 # 开头，后面跟六个十六进制数字（0-9 和 A-F），分别表示红、绿、蓝三种颜色成分。也可以用三个十六进制数字来简写。

示例：

/* 全写 */
div {
   
    background-color: #FF5733; /* 橙红色 */
}

/* 简写 */
span {
   
    color: #F00; /* 红色 */
}

2. RGB 颜色

RGB 使用 rgb() 函数，其中包含三个参数，每个参数取值范围是 0 到 255 或者百分比，分别表示红、绿、蓝三种颜色成分。

示例：

p {
   
    color: rgb(255, 87, 51); /* 橙红色 */
}

3. RGBA 颜色

RGBA 是 RGB 的扩展，添加了第四个参数 alpha（透明度），取值范围是 0（完全透明）到 1（完全不透明）。

示例：

button {
   
    background-color: rgba(255, 87, 51, 0.5); /* 半透明橙红色 */
}

4. HSL 颜色

HSL 使用 hsl() 函数，包含三个参数：色调（0-360 度）、饱和度（百分比）和亮度（百分比）。

示例：

header {
   
    background-color: hsl(12, 100%, 50%); /* 橙色 */
}

5. HSLA 颜色

HSLA 是 HSL 的扩展，同样添加了 alpha 参数用于设置透明度，取值范围是 0（完全透明）到 1（完全不透明）。

示例：

footer {
   
    background-color: hsla(12, 100%, 50%, 0.75); /* 半透明橙色 */
}

这些不同的颜色表示法为网页设计师提供了极大的灵活性，可以根据设计需求选择最合适的方式。例如，在需要精确控制颜色时可以选择 RGB 或十六进制；而在处理色彩渐变或需要调整透明度时，HSL(A) 可能会更直观易用。希望这些示例能帮助你更好地理解和应用 CSS 中的颜色表示法。

2.背景颜色

当然，下面是三个使用不同颜色表示法来设置背景颜色的 CSS 示例。这些示例展示了如何使用十六进制颜色值、RGB 和 HSL 来为 HTML 元素指定背景颜色。

示例 1: 使用十六进制颜色值

<!DOCTYPE html>
<html>
<head>
<style>
body {
     
    background-color: #FFD700; /* 金色 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.golden-background {
     
    background-color: #FFD700; /* 金色 */
    padding: 20px;
    border-radius: 8px;
}
</style>
</head>
<body>

<div class="golden-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是用十六进制颜色值设置的。</p>
</div>

</body>
</html>

在这里插入图片描述

示例 2: 使用 RGB 颜色

<!DOCTYPE html>
<html>
<head>
<style>
body {
     
    background-color: rgb(79, 153, 242); /* 蓝色 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.blue-background {
     
    background-color: rgb(79, 153, 242); /* 蓝色 */
    padding: 20px;
    border-radius: 8px;
    color: white; /* 文字颜色设为白色以提高对比度 */
}
</style>
</head>
<body>

<div class="blue-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是用 RGB 颜色值设置的。</p>
</div>

</body>
</html>

在这里插入图片描述

示例 3: 使用 HSL 颜色

<!DOCTYPE html>
<html>
<head>
<style>
body {
     
    background-color: hsl(120, 100%, 75%); /* 绿色 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.green-background {
     
    background-color: hsl(120, 100%, 75%); /* 绿色 */
    padding: 20px;
    border-radius: 8px;
    color: black; /* 文字颜色设为黑色以提高对比度 */
}
</style>
</head>
<body>

<div class="green-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是用 HSL 颜色值设置的。</p>
</div>

</body>
</html>