迹忆客 专注技术分享

本文将介绍为 HTML 元素添加透明度的方法。我们将使用 CSS 来添加透明度。

使用 CSS Hexcode 为 HTML 中的背景提供透明度

我们可以使用 CSS 十六进制代码为 HTML 元素提供透明度。我们可以将十六进制代码设置为 background 属性的值。我们将使用的十六进制代码是八位数字。八位十六进制代码的格式为 #RRGGBBAA。前六位数字分别代表红色、绿色和蓝色的十六进制代码。最后两位是不透明度的十六进制代码。

例如，创建一个 div 并在其中写入一些文本。在 CSS 中，选择 div 并将 background 属性设置为 #00ff0080。十六进制代码 #00ff00 代表绿色，80 代表颜色的不透明度。这将在文本中创建一个绿色背景，并赋予 50% 或值 128 的不透明度。十六进制值 80 的二进制等效值是 128。因此，我们可以使用十六进制代码在 HTML 中创建一个透明元素。

示例代码：

<div class="light">This is some text</div>

div {
    background: #00ff0080;
}

使用 CSS opacity 属性使 HTML 中的背景透明

我们可以使用 CSS 中的 opacity 属性创建透明背景。我们可以在 HTML 中的任何元素上使用此属性，并使背景透明。opacity 属性设置元素的不透明度。它负责设置元素后面的内容隐藏的程度。值的范围从 0.0 到 0.9。较低的值类似于最低级别的不透明度，反之亦然。这意味着当不透明度值接近 0.0 时，元素后面的内容更加明显。而且内容似乎更加透明。我们还可以使用 % 表示来设置不透明度。它的范围从 0%到 100%。

例如，创建一个类为 bg 的 div。写一些文本作为 div 之间的元素。在 CSS 中，选择 div 元素并使用 background-color 属性将背景设置为 yellow。然后，使用类选择器选择 bg 类。接下来，将 opacity 设置为 0.5 的值。

下面的例子创建了一个黄色的背景色，里面有一些文字。0.5 不透明度值为元素增加了一些透明度。我们可以将值从 0.0 更改为 1.0 以测试以下示例中的不透明度。因此，我们在教程中为背景颜色添加了透明度。

示例代码：

<div class="bg">This is some text</div>

div {
    background-color: yellow;
}

.bg {
    opacity: 0.5;
}

使用 CSS background 属性使 HTML 中的背景透明

使用 opacity 属性有一个缺点。在父元素中设置的 opacity 值适用于所有子元素。为了摆脱这个问题，我们可以使用 CSS background 属性。我们可以为元素指定 rgba 值并防止它对子元素应用不透明度。background 属性使用 rgba() 函数来指定 RGB 颜色及其不透明度。该函数的语法如下所示。

rgba(red, green, blue, alpha)

我们可以在 0 到 255 范围内指定 RGB 值的强度。我们还可以表示 0% 到 100% 范围内的百分比值。我们可以像我们在第一种方法中讨论的那样指定 alpha 的值。

对第一种方法的代码示例进行一些 CSS 更改。在 div 的选择中，删除 background-color 属性并添加 background 属性。编写 rgba() 函数作为属性的值。将红色的值设置为 255，将绿色和蓝色的值设置为 0。将 alpha 值写为 0.2。然后，删除 bg 类选择。

下面的代码片段将在文本中创建红色背景并增加一定程度的透明度。

示例代码：

<div class="light">This is some text</div>

div {
 background:rgba(255,0,0, 0.2)
}