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

发布于：2024-12-06 ⋅ 阅读:(90) ⋅ 点赞:(0)

在 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>

在这里插入图片描述

每个示例都展示了一个简单的 HTML 页面，其中包含一个带有特定背景颜色的 div 元素。通过调整 background-color 属性的值，你可以轻松地改变页面中任何元素的背景颜色。这里分别使用了：

  • 十六进制颜色值：适用于需要精确颜色代码的情况。
  • RGB 颜色：适合那些希望通过数值直接控制红、绿、蓝三原色的人。
  • HSL 颜色：对于希望基于色调、饱和度和亮度调整颜色的设计者来说非常直观。

3.背景图片

当然！下面是三个使用不同方式设置背景图片的 CSS 示例。这些示例展示了如何使用本地文件、在线 URL 和重复模式来为 HTML 元素指定背景图片。

示例 1: 使用本地图片文件

假设你有一个名为 background.jpg 的图片文件，位于项目的 images 文件夹中。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url('images/background.jpg'); /* 指定本地图片路径 */
    background-size: cover; /* 图片覆盖整个背景 */
    background-position: center; /* 图片居中 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.content {
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    padding: 20px;
    border-radius: 8px;
}
</style>
</head>
<body>

<div class="content">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是用本地图片文件设置的。</p>
</div>

</body>
</html>

示例 2: 使用在线 URL 图片

你可以直接使用互联网上的图片 URL 来设置背景图片。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url('https://example.com/path/to/image.jpg'); /* 使用在线图片URL */
    background-size: contain; /* 图片适应容器大小 */
    background-position: center; /* 图片居中 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.image-content {
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
    padding: 20px;
    border-radius: 8px;
}
</style>
</head>
<body>

<div class="image-content">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是用在线图片 URL 设置的。</p>
</div>

</body>
</html>

示例 3: 使用重复模式

有时你可能想要创建一个由小图片平铺组成的背景效果。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url('images/pattern.png'); /* 小图案图片 */
    background-repeat: repeat; /* 允许图片水平和垂直方向重复 */
    padding: 20px;
    font-family: Arial, sans-serif;
}

.pattern-content {
    background-color: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
    padding: 20px;
    border-radius: 8px;
}
</style>
</head>
<body>

<div class="pattern-content">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景是由一个小图案图片平铺而成的。</p>
</div>

</body>
</html>

每个示例都展示了一个简单的 HTML 页面，其中包含一个带有特定背景图片的 div 元素。通过调整 background-image 属性的值和其他相关属性（如 background-size、background-position 和 background-repeat），你可以实现不同的视觉效果：

  • 本地图片文件：适用于项目中自带的图片资源。
  • 在线 URL 图片：方便快捷地使用网络上的图片作为背景。
  • 重复模式：适合用于创建由小图片平铺形成的复杂背景效果。

4.背景重复

当然！以下是三个使用不同 background-repeat 属性值来控制背景图片重复行为的 CSS 示例。这些示例展示了如何设置背景图片以实现不同的重复效果。

示例 1: no-repeat - 禁止重复

在这个例子中，背景图片只显示一次，并且不会在水平或垂直方向上重复。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    background-image: url('https://via.placeholder.com/150'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: center; /* 图片居中 */
    height: 300px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="container">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片不会重复。</p>
</div>

</body>
</html>

示例 2: repeat - 水平和垂直方向重复

在这个例子中，背景图片将在水平和垂直方向上无限重复，直到填满整个元素。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.pattern-container {
    background-image: url('https://via.placeholder.com/50'); /* 使用一个小图案作为背景 */
    background-repeat: repeat; /* 允许图片在两个方向上重复 */
    min-height: 400px; /* 设置最小高度以便更好地查看效果 */
    padding: 20px;
    box-sizing: border-box;
}
</style>
</head>
<body>

<div class="pattern-container">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片会在水平和垂直方向上重复。</p>
</div>

</body>
</html>

示例 3: repeat-x 和 repeat-y - 分别在水平或垂直方向重复

在这个例子中，我们分别展示了仅在水平方向 (repeat-x) 和仅在垂直方向 (repeat-y) 上重复背景图片的效果。

水平方向重复 (repeat-x)
<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.horizontal-pattern {
    background-image: url('https://via.placeholder.com/100x50'); /* 使用一个长条形图片 */
    background-repeat: repeat-x; /* 仅在水平方向上重复 */
    height: 150px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="horizontal-pattern">
    <h2>水平方向重复</h2>
    <p>这个背景图片仅在水平方向上重复。</p>
</div>

</body>
</html>
垂直方向重复 (repeat-y)
<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.vertical-pattern {
    background-image: url('https://via.placeholder.com/50x100'); /* 使用一个竖条形图片 */
    background-repeat: repeat-y; /* 仅在垂直方向上重复 */
    width: 200px; /* 设置容器宽度以便更好地查看效果 */
    padding: 20px;
    box-sizing: border-box;
}
</style>
</head>
<body>

<div class="vertical-pattern">
    <h2>垂直方向重复</h2>
    <p>这个背景图片仅在垂直方向上重复。</p>
</div>

</body>
</html>

每个示例都展示了一个简单的 HTML 页面，其中包含一个带有特定背景图片重复模式的 div 元素。通过调整 background-repeat 属性的值，你可以实现不同的视觉效果：

  • no-repeat：适用于希望背景图片只出现一次的情况。
  • repeat：适合用于创建由小图片平铺形成的复杂背景效果。
  • repeat-x 和 repeat-y：允许你单独控制背景图片在水平或垂直方向上的重复行为。

5.背景定位

当然！以下是三个使用不同 background-position 属性值来控制背景图片定位的 CSS 示例。这些示例展示了如何设置背景图片的位置，以实现不同的视觉效果。

示例 1: background-position: center

在这个例子中，背景图片将居中显示在元素内部。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.centered-background {
    background-image: url('https://via.placeholder.com/300x200'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: center; /* 图片居中 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="centered-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片是居中的。</p>
</div>

</body>
</html>

示例 2: background-position: top left 和 bottom right

在这个例子中，我们分别展示了背景图片定位在左上角 (top left) 和右下角 (bottom right) 的效果。

左上角 (top left)
<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.top-left-background {
    background-image: url('https://via.placeholder.com/150'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: top left; /* 图片定位在左上角 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    padding: 20px;
    box-sizing: border-box;
}
</style>
</head>
<body>

<div class="top-left-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片定位在左上角。</p>
</div>

</body>
</html>
右下角 (bottom right)
<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.bottom-right-background {
    background-image: url('https://via.placeholder.com/150'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: bottom right; /* 图片定位在右下角 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    padding: 20px;
    box-sizing: border-box;
}
</style>
</head>
<body>

<div class="bottom-right-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片定位在右下角。</p>
</div>

</body>
</html>

示例 3: 使用百分比和像素值进行精确定位

在这个例子中，我们展示了如何使用百分比和像素值来更精确地控制背景图片的位置。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.precise-positioning {
    background-image: url('https://via.placeholder.com/100x100'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: 75% 25%; /* 图片定位在距离左边75%，顶部25%的位置 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="precise-positioning">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片使用了百分比和像素值进行精确定位。</p>
</div>

</body>
</html>

每个示例都展示了一个简单的 HTML 页面，其中包含一个带有特定背景图片定位模式的 div 元素。通过调整 background-position 属性的值，你可以实现不同的视觉效果：

  • center：适用于希望背景图片居中显示的情况。
  • top left 和 bottom right：适合用于将背景图片定位在元素的角落。
  • 百分比和像素值：允许你更精确地控制背景图片的位置，以适应特定的设计需求。

如果你有更多问题或需要进一步的例子，请随时告诉我！

6.背景尺寸

当然！background-size 属性用于控制背景图片的尺寸，确保它能够以期望的方式填充或适应元素。以下是三个使用不同 background-size 值来设置背景图片尺寸的 CSS 示例。

示例 1: background-size: cover

cover 关键字会缩放背景图片，使其完全覆盖背景区域，同时保持图片的比例。这可能会导致图片的部分内容被裁剪。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.cover-background {
    background-image: url('https://via.placeholder.com/800x600'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: center; /* 图片居中 */
    background-size: cover; /* 背景图片覆盖整个容器 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="cover-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片使用了 <code>background-size: cover</code>，因此它会完全覆盖容器。</p>
</div>

</body>
</html>

在这里插入图片描述

示例 2: background-size: contain

contain 关键字会缩放背景图片，使其完全包含在背景区域内，并且不会超出边界。图片会尽可能大，但仍然保持其比例。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.contain-background {
    background-image: url('https://via.placeholder.com/800x600'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: center; /* 图片居中 */
    background-size: contain; /* 背景图片适应容器 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="contain-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片使用了 <code>background-size: contain</code>，因此它会适应容器大小。</p>
</div>

</body>
</html>

在这里插入图片描述

示例 3: 使用具体尺寸值

你可以通过指定具体的宽度和高度（像素、百分比等）来精确控制背景图片的尺寸。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.fixed-size-background {
    background-image: url('https://via.placeholder.com/400x300'); /* 使用在线占位符图片 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: center; /* 图片居中 */
    background-size: 200px 150px; /* 设置背景图片的具体尺寸 */
    height: 400px; /* 设置容器高度以便更好地查看效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>

<div class="fixed-size-background">
    <h1>欢迎来到我的网站</h1>
    <p>这个背景图片使用了具体尺寸值 <code>background-size: 200px 150px</code>。</p>
</div>

</body>
</html>

在这里插入图片描述

每个示例都展示了一个简单的 HTML 页面，其中包含一个带有特定背景图片尺寸设置的 div 元素。通过调整 background-size 属性的值，你可以实现不同的视觉效果：

  • cover：适用于希望背景图片完全覆盖容器的情况，即使这意味着部分图片会被裁剪。
  • contain：适合用于确保背景图片完整显示在容器内，而不会超出边界。
  • 具体尺寸值：允许你更精确地控制背景图片的尺寸，以适应特定的设计需求。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布