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