在本教程中，動(dòng)力節(jié)點(diǎn)小編將介紹三種使用 CSS 在 HTML 中創(chuàng)建透明顏色的方法。它將在 CSS 中設(shè)置背景不透明度。

在 CSS 中使用opacity屬性創(chuàng)建透明顏色

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

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

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

示例代碼：

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

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

在 CSS 中使用rgba()函數(shù)創(chuàng)建透明色

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

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

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

示例代碼：

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

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

在 CSS 中使用十六進(jìn)制值創(chuàng)建透明顏色

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

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

下面的示例顯示，當(dāng)我們80在十六進(jìn)制代碼的末尾添加時(shí)，標(biāo)題的背景顏色變得 50% 透明。

示例代碼：

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

.transparent{
    background-color: #A5BE3280
}