更改 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() 函式來更改文字透明度。