迹忆客 专注技术分享

在本文中，我们将介绍使用 CSS 在 HTML 中创建透明颜色的三种方法。它将在 CSS 中设置背景不透明度。

在 CSS 中使用 opacity 属性创建透明颜色

opacity 是 CSS 中使用的属性之一，尤其是颜色。我们可以使用 0 到 1 之间的值来显示颜色或元素的不透明度。如果值为 1，则表示颜色为 100% 不透明。这意味着颜色根本不透明。如果我们最初减小该值，元素将变得更加透明。如果 opacity 值为 0.5，颜色将变为半透明或 50% 透明。但是，在使用 opacity 时，子元素也会变得透明。

例如，创建一个标题为 h1 和类为 transparent 的 HTML 文档。在 CSS 中选择 transparent 类后，将 background-color 设置为 #cc33ff 和 opacity 值 0.4。如果我们希望标题及其背景颜色变得更加透明，我们可以降低不透明度值。

下面的示例显示背景颜色和标题 h1 变得透明，因为我们保持 opacity 值，即 0.4。

示例代码：

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #cc33ff;
    opacity: 0.4;
}

在 CSS 中使用 rgba() 函数创建透明颜色

rgba() 函数使用红-绿-蓝-alpha 模型定义颜色。rbga() 函数中的 rbg 表示红色、绿色和蓝色的颜色值，而 a 表示颜色的不透明度。每个参数（红色、蓝色、绿色）定义了 0-255 之间的颜色强度。而 a 的值必须在 0-1 之间。例如 rgba(255, 100, 100, 0.4)。a 的值越小，颜色就越透明。与 opacity 属性不同，子元素不会变得透明。如果 a 的值为 0.5，则颜色为半透明或 50% 透明。

例如，创建一个标题为 h1 和类为 transparent 的 HTML 文档。在标题标签之间写入文本 Hello World。使用 rgba() 函数为类提供背景颜色。将 rgba 值设为 rgba(255, 100, 100, 0.4)。减小 a 的值使其更透明，增加 a 的值使其更不透明。

下面的示例显示，当我们将 a 的值设置为 0.4 时，标题的背景颜色变得透明。但是，子元素 heading 不透明。

示例代码：

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: rgba(255, 100, 100, 0.4);
}

在 CSS 中使用十六进制值创建透明颜色

我们经常使用带有 6 个字符后跟 # 的十六进制值来为 HTML 元素提供特定的颜色。例如，#A5BE32。我们可以通过在十六进制值的末尾添加两个数值并使其成为八个字符的十六进制值来使颜色透明。例如，#A5BE3280。这里，#A5BE32 表示颜色，最后的 80 表示颜色的不透明度。如果你想要 50% 的透明颜色，你可以在十六进制代码的末尾使用值 80。由于 RGB 颜色中的比例是 0-255，一半将是 255/2 = 128，转换为十六进制变为 80。与 opacity 属性不同，子元素不会变得透明。

例如，创建一个标题为 h1 和类 transparent 的 HTML 文档，即 <h1 class="transparent">Hello world </h1>。为班级提供 #A5BE32 背景颜色。在十六进制代码的末尾添加 80，使其透明度为 50%。这样十六进制代码变成 #A5BE3280。

下面的示例显示，当我们在十六进制代码的末尾添加 80 时，标题的背景颜色变得 50% 透明。

示例代码：

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #A5BE3280
}