在 HTML 中使用十六进制代码设置透明度

Sushant Poudel 2023年2月19日
  1. 使用 CSS Hexcode 为 HTML 中的背景提供透明度
  2. 使用 CSS opacity 属性使 HTML 中的背景透明
  3. 使用 CSS background 属性使 HTML 中的背景透明
在 HTML 中使用十六进制代码设置透明度

本文将介绍为 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.00.9。较低的值类似于最低级别的不透明度,反之亦然。这意味着当不透明度值接近 0.0 时,元素后面的内容更加明显。而且内容似乎更加透明。我们还可以使用 % 表示来设置不透明度。它的范围从 0%100%

例如,创建一个类为 bgdiv。写一些文本作为 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)

我们可以在 0255 范围内指定 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)
}
作者: Sushant Poudel
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn