更改 CSS 中的文本不透明度
本文将介绍两种改变 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()
函数来更改文本透明度。
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