在 HTML 中使用十六進位制程式碼設定透明度

1. 使用 CSS Hexcode 為 HTML 中的背景提供透明度
2. 使用 CSS opacity 屬性使 HTML 中的背景透明
3. 使用 CSS background 屬性使 HTML 中的背景透明

本文將介紹為 HTML 元素新增透明度的方法。我們將使用 CSS 來新增透明度。

使用 CSS Hexcode 為 HTML 中的背景提供透明度

我們可以使用 CSS 十六進位制程式碼為 HTML 元素提供透明度。我們可以將十六進位制程式碼設定為 background 屬性的值。我們將使用的十六進位制程式碼是八位數字。八位十六進位制程式碼的格式為 #RRGGBBAA。前六位數字分別代表紅色、綠色和藍色的十六進位制程式碼。最後兩位是不透明度的十六進位制程式碼。

例如，建立一個 div 並在其中寫入一些文字。在 CSS 中，選擇 div 並將 background 屬性設定為 #00ff0080。十六進位制程式碼 #00ff00 代表綠色，80 代表顏色的不透明度。這將在文字中建立一個綠色背景，並賦予 50% 或值 128 的不透明度。十六進位制值 80 的二進位制等效值是 128。因此，我們可以使用十六進位制程式碼在 HTML 中建立一個透明元素。

示例程式碼：

<div class="light">This is some text</div>

div {
    background: #00ff0080;
}

使用 CSS opacity 屬性使 HTML 中的背景透明

我們可以使用 CSS 中的 opacity 屬性建立透明背景。我們可以在 HTML 中的任何元素上使用此屬性，並使背景透明。opacity 屬性設定元素的不透明度。它負責設定元素後面的內容隱藏的程度。值的範圍從 0.0 到 0.9。較低的值類似於最低階別的不透明度，反之亦然。這意味著當不透明度值接近 0.0 時，元素後面的內容更加明顯。而且內容似乎更加透明。我們還可以使用 % 表示來設定不透明度。它的範圍從 0%到 100%。

例如，建立一個類為 bg 的 div。寫一些文字作為 div 之間的元素。在 CSS 中，選擇 div 元素並使用 background-color 屬性將背景設定為 yellow。然後，使用類選擇器選擇 bg 類。接下來，將 opacity 設定為 0.5 的值。

下面的例子建立了一個黃色的背景色，裡面有一些文字。0.5 不透明度值為元素增加了一些透明度。我們可以將值從 0.0 更改為 1.0 以測試以下示例中的不透明度。因此，我們在教程中為背景顏色新增了透明度。

示例程式碼：

<div class="bg">This is some text</div>

div {
    background-color: yellow;
}

.bg {
    opacity: 0.5;
}

使用 CSS background 屬性使 HTML 中的背景透明

使用 opacity 屬性有一個缺點。在父元素中設定的 opacity 值適用於所有子元素。為了擺脫這個問題，我們可以使用 CSS background 屬性。我們可以為元素指定 rgba 值並防止它對子元素應用不透明度。background 屬性使用 rgba() 函式來指定 RGB 顏色及其不透明度。該函式的語法如下所示。

rgba(red, green, blue, alpha)

我們可以在 0 到 255 範圍內指定 RGB 值的強度。我們還可以表示 0% 到 100% 範圍內的百分比值。我們可以像我們在第一種方法中討論的那樣指定 alpha 的值。

對第一種方法的程式碼示例進行一些 CSS 更改。在 div 的選擇中，刪除 background-color 屬性並新增 background 屬性。編寫 rgba() 函式作為屬性的值。將紅色的值設定為 255，將綠色和藍色的值設定為 0。將 alpha 值寫為 0.2。然後，刪除 bg 類選擇。

下面的程式碼片段將在文字中建立紅色背景並增加一定程度的透明度。

示例程式碼：

<div class="light">This is some text</div>

div {
 background:rgba(255,0,0, 0.2)
}