更改 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