CSS设置背景透明度的方法

在本教程中，动力节点小编将介绍三种使用 CSS 在 HTML 中创建透明颜色的方法。它将在 CSS 中设置背景不透明度。

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

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

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

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

示例代码：

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

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

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

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

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

下面的示例显示标题的背景颜色在我们输入 as 时变得a透明0.4。但是，子元素heading不会变得透明。

示例代码：

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

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

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

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

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

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

示例代码：

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

.transparent{
    background-color: #A5BE3280
}