迹忆客 专注技术分享

本文将介绍两种改变 CSS 中文本不透明度的方法。

使用 CSS opacity 属性更改 CSS 中的文本透明度

opacity 属性表示元素的透明度。它通常以 0 到 1 的比例表示，其中 0 是完全透明的。

这意味着它是完全不可见的。同样，1 是完全不透明的，而 0.5 可以被视为元素不透明度的基准，因为它是 50% 透明的。

例如，创建一个 p 元素，然后创建一个类 before。在 p 元素中键入你选择的文本。

接下来，使用类 after 创建一个类似的 p 元素。在 CSS 中选择类 before 并指定 red 作为文本颜色。

对于 after 类，将颜色设置为 red，将 opacity 属性设置为 0.4，范围从 0 到 1，如你所愿。

同样，我们也可以通过百分比来表示元素的不透明度。0% 完全透明，100% 完全不透明。我们也可以用 40%代替 0.4。

示例代码：

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color:red;
}
.after {
 color:red;
 opacity: 0.4;
}

使用 rgba() 函数更改 CSS 中的文本透明度

rgba() 函数通常用于将颜色插入元素。rgba() 中的字母代表红色、绿色、蓝色和 alpha。

它表示该函数采用四个值。alpha 选项是表示元素的不透明度的扩展。

我们可以将红色、蓝色或绿色的强度表示为 0 到 255 或 0% 到 100% 之间的整数。对于 opacity，我们可以指定 0-1 值，当然还有 0%-100%范围。

我们可以使用 rgba() 函数作为 color 属性中的选项。

我们将使用与上面第一个示例相同的 HTML 模板进行演示。选择类 before 并在 CSS 的 color 属性中编写 rgba() 函数。

在函数中写入值 0, 0, 255，这是蓝色的颜色代码。after 类使用相同的颜色代码，但添加 0.5 作为不透明度值。

结果，第一个文本显示为蓝色，而第二个文本将不那么不透明，因为我们在其中设置了不透明度。

示例代码：

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color: rgba(0, 0, 255);
}

.after {
 color: rgba(0, 0, 255, 0.5);
}

因此，考虑到所有事实，我们使用 opacity 属性和 rgba() 函数来更改文本透明度。