在本教程中，動力節點小編將介紹三種使用 CSS 在 HTML 中創建透明顏色的方法。它將在 CSS 中設置背景不透明度。

在 CSS 中使用opacity屬性創建透明顏色

這opacity是 CSS 中使用的屬性之一，尤其是顏色。我們可以使用 to 之間的值0來1顯示顏色或元素的不透明度。如果值為1，則表示顏色為 100% 不透明。這意味著顏色根本不透明。如果我們最初減小該值，元素將變得更加透明。如果opacity值為0.5，顏色將變為半透明或 50% 透明。但是，在使用opacity時，子元素也會變得透明。

例如，創建一個帶有標題h1和類的 HTML 文檔transparent。在 CSS 中選擇類后設置background-coloras#cc33ff和opacityvalue 。如果我們希望標題及其背景顏色變得更加透明，我們可以降低不透明度值。0.4transparent

下面的示例顯示背景顏色和標題h1在我們保持opacity值時變得透明，即0.4.

示例代碼：

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #cc33ff;
    opacity: 0.4;
}

在 CSS 中使用rgba()函數創建透明色

該rgba()函數使用 red-green-blue-alpha 模型定義顏色。rbg函數中的rbga()表示紅色、綠色和藍色的顏色值，同時表示a顏色的不透明度。每個參數(紅色、藍色、綠色)定義 之間的顏色強度0-255。而 的值a必須介于 之間0-1。例如rgba(255, 100, 100, 0.4). 的值越小a，顏色越透明。opacity與屬性不同，子元素不會變得透明。如果值為a，0.5顏色將為半透明或 50% 透明。

例如，創建一個帶有 headerh1和 class的 HTML 文檔transparent。Hello World在標題標簽之間寫下文本。使用該rgba()函數為他們提供類的背景顏色。將rgba值設為rgba(255, 100, 100, 0.4)。減小 的值a使其更透明，增加 的值a使其更不透明。

下面的示例顯示標題的背景顏色在我們輸入 as 時變得a透明0.4。但是，子元素heading不會變得透明。

示例代碼：

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: rgba(255, 100, 100, 0.4);
}

在 CSS 中使用十六進制值創建透明顏色

我們經常使用帶有六個字符的十六進制值，然后#為 HTML 元素賦予特定的顏色。例如，#A5BE32。我們可以通過在十六進制值的末尾添加兩個數值并使其成為八個字符的十六進制值來使顏色透明。例如，#A5BE3280。這里，#A5BE32表示顏色，80最后表示顏色的不透明度。如果您想要 50% 的透明顏色，您可以使用80十六進制代碼末尾的值。由于比例是0-255RGB 顏色，一半是255/2 = 128，轉換為十六進制變成80。opacity與屬性不同，子元素不會變得透明。

例如，創建一個帶有 headerh1和 class的 HTML 文檔transparent，即<h1 class="transparent">Hello world </h1>. 為班級提供#A5BE32背景顏色。添加80在十六進制代碼的末尾，使其 50% 透明。這樣十六進制代碼就變成了#A5BE3280。

下面的示例顯示，當我們80在十六進制代碼的末尾添加時，標題的背景顏色變得 50% 透明。

示例代碼：

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #A5BE3280
}