更改 CSS 中的文本不透明度

Sushant Poudel 2023年2月20日 2022年4月20日
  1. 使用 CSS opacity 属性更改 CSS 中的文本透明度
  2. 使用 rgba() 函数更改 CSS 中的文本透明度
更改 CSS 中的文本不透明度

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

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

opacity 属性表示元素的透明度。它通常以 01 的比例表示,其中 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() 函数来更改文本透明度。

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

相关文章 - CSS Opacity