在 CSS 中設定背景不透明度
在本文中，我們將介紹使用 CSS 在 HTML 中建立透明顏色的三種方法。它將在 CSS 中設定背景不透明度。
在 CSS 中使用 opacity 屬性建立透明顏色
opacity 是 CSS 中使用的屬性之一，尤其是顏色。我們可以使用 0 到 1 之間的值來顯示顏色或元素的不透明度。如果值為 1，則表示顏色為 100% 不透明。這意味著顏色根本不透明。如果我們最初減小該值，元素將變得更加透明。如果 opacity 值為 0.5，顏色將變為半透明或 50% 透明。但是，在使用 opacity 時，子元素也會變得透明。
例如，建立一個標題為 h1 和類為 transparent 的 HTML 文件。在 CSS 中選擇 transparent 類後，將 background-color 設定為 #cc33ff 和 opacity 值 0.4。如果我們希望標題及其背景顏色變得更加透明，我們可以降低不透明度值。
下面的示例顯示背景顏色和標題 h1 變得透明，因為我們保持 opacity 值，即 0.4。
示例程式碼：
<h1 class="transparent"> Hello world </h1>
.transparent{
background-color: #cc33ff;
opacity: 0.4;
}
在 CSS 中使用 rgba() 函式建立透明顏色
rgba() 函式使用紅-綠-藍-alpha 模型定義顏色。rbga() 函式中的 rbg 表示紅色、綠色和藍色的顏色值，而 a 表示顏色的不透明度。每個引數（紅色、藍色、綠色）定義了 0-255 之間的顏色強度。而 a 的值必須在 0-1 之間。例如 rgba(255, 100, 100, 0.4)。a 的值越小，顏色就越透明。與 opacity 屬性不同，子元素不會變得透明。如果 a 的值為 0.5，則顏色為半透明或 50% 透明。
例如，建立一個標題為 h1 和類為 transparent 的 HTML 文件。在標題標籤之間寫入文字 Hello World。使用 rgba() 函式為類提供背景顏色。將 rgba 值設為 rgba(255, 100, 100, 0.4)。減小 a 的值使其更透明，增加 a 的值使其更不透明。
下面的示例顯示，當我們將 a 的值設定為 0.4 時，標題的背景顏色變得透明。但是，子元素 heading 不透明。
示例程式碼：
<h1 class="transparent"> Hello world </h1>
.transparent{
background-color: rgba(255, 100, 100, 0.4);
}
在 CSS 中使用十六進位制值建立透明顏色
我們經常使用帶有 6 個字元後跟 # 的十六進位制值來為 HTML 元素提供特定的顏色。例如，#A5BE32。我們可以通過在十六進位制值的末尾新增兩個數值並使其成為八個字元的十六進位制值來使顏色透明。例如，#A5BE3280。這裡，#A5BE32 表示顏色，最後的 80 表示顏色的不透明度。如果你想要 50% 的透明顏色，你可以在十六進位制程式碼的末尾使用值 80。由於 RGB 顏色中的比例是 0-255，一半將是 255/2 = 128，轉換為十六進位制變為 80。與 opacity 屬性不同，子元素不會變得透明。
例如，建立一個標題為 h1 和類 transparent 的 HTML 文件，即 <h1 class="transparent">Hello world </h1>。為類提供 #A5BE32 背景顏色。在十六進位制程式碼的末尾新增 80，使其透明度為 50%。這樣十六進位制程式碼變成 #A5BE3280。
下面的示例顯示，當我們在十六進位制程式碼的末尾新增 80 時，標題的背景顏色變得 50% 透明。
示例程式碼：
<h1 class="transparent"> Hello world </h1>
.transparent{
background-color: #A5BE3280
}