明度在網頁是一個很重要的屬性，非常多的特效都需要控制透明度來完成。控制透明度一共有兩種方法。

元素透明度

opacity屬性指定了一個元素的透明度，這個透明度不僅會影響本元素，也會影響里面的子元素的透明度。

opacity:數值;

opacity屬性取值范圍為0.0~1.0，0.0表示完全透明，1.0表示完全不透明（默認值）。

opacity屬性取值不可以為負數。

要注意的是，一旦元素設置了Opacity，里面的內容和子元素都會受到影響。如果不透明度的值變高，將使透明元素內部的文本難以閱讀。

背景顏色透明度

CSS3還引入了一種新的方法RGBA來指定一種顏色，該顏色包括alpha透明度作為顏色值的一部分。

本質上是改變自身的背景顏色，讓背景顏色變得透明，所以不會影響到內容和子元素。

background: rgba(顏色數值,顏色 數值,顏色數值, 透明度);

經典案例

當鼠標指針移到圖像上時，圖像好像會變亮，這其實是用透明度來控制。

總結

值工具與不透明度。

可以來看一下，比如在這里取了一個顏色，取了這樣的紫色，可以在這里去設計軟件里面把這個值復制過來，復制了之后在這里去寫一下，記得要加一個井號，16進制，這個顏色就會在這里展示出來了。

這個顏色其實可以用vscode自帶的調色板工具去切換顏色色值的模式，當點擊這里的時候能切換好幾種。當去調整透明度的時候會發現后面16進制的多了兩位，包括其他的顏色模式也會把它變成a的，加了透明度a字母的模式，RGBA。

這里可以看到這里還有個HWB，這個也是從來沒有用過，有興趣可以自己去研究一下。所以可以點擊這里去切換不同的顏色模式，下面的代碼的設定也會隨之的更改。

當去調整顏色的時候會發現調節的面板顏色就斷成了兩邊，左邊這里就是當前調整變成的顏色，右邊這里就是調整之前的顏色。如果調完半天之后發現效果不滿意，想回到原來那個，可以點擊一下就回去了。

有時候如果想用16進制的顏色的寫法，但是透明度又感覺不太好設置，其實可以先把它切換為RGBA模式。比如現在一開始這里是16進制的寫法，想讓它變成20%(不透明度)的顏色，先把鼠標放這里，讓顏色色板出現之后先把它轉成RGBA的模式，調透明度，調到比如20%的透明度，0.2，再切回去，再切回到這個模式。這個就不就是16進制的帶不透明度設置的寫法，一個顏色值了。

所以這些小技巧大家都可以去用一下。當然很多時候去給某個顏色設置不透明度相對來說會比較少用，比較常用的去設置不透明度其實很多時候是之前給大家介紹過的，給整個元素用opacity去設置一個不透明度。

比如把它設置到父元素上，不透明度跟顏色的不透明度是有非常大的區別的。不透明度(opacity)是整個元素的整體，包括它的子元素也會受影響的，會看到它整體，包括內部的子元素也好，它的整體變成了很不明顯的效果了。

但是顏色的設置只會影響到設置顏色的部分(或者方面)，比如設置不透明度，它只影響到了子元素的背景顏色的不透明度。比如字體，color是給文字設置顏色的，不透明度其實也可以設置，比如把字體的不透明度降到這么低，就會發現字體自己的顏色就會變得不透明度的狀態。

比如這里來個red，就明顯能感覺到它這些都是對應各自影響的部分去產生作用的。所以有時候如果希望背景顏色有一個不透明度，但是整體的元素不想讓它有任何的半透明的效果，就可以通過特定的背景顏色的顏色色值的不透明度的設置達到想要的效果，而不影響到整體的元素。

頭條創作挑戰賽#

【今日HTML小知識-2：設置顏色透明】在網頁布局中有時為了網頁的整體美觀，可能需要將網頁中的某些部分設置為背景顏色透明，那么如何設置背景顏色透明呢？本篇文章就來給大家介紹一下設置背景顏色透明的兩種方法。

1、通過backgroud和opacity設置背景顏色透明

background屬性中屬性值比較簡單，這里就不細說了，opacity屬性參數的＂不透明度＂是以數字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是1.0，換句話說，數字越大代表元素越不透明。代碼示例如下：

注意：通過backgroud和opacity設置背景顏色透明度，如果背景上面有文字的話，那么文字也會變成透明，就像上面的效果一樣。

2、通過rgba方式設置背景顏色透明

所謂RGBA顏色，就是RGB三原色加ALPHA。在給背景添加顏色的同時，提供透明度特性。

用法：background:rgba(R, G, B, A) ；

代碼實例如下：

注意：通過rgba方式設置背景顏色透明度，可以設置背景顏色透明而文字不透明。

以上為HTML設置背景透明色的兩種方法，希望能幫助到正在學習HTML的你們噢~~~

新人作者，如有不足地方，希望大家多多交流，隨時補充噢~~~