先簡單介紹一下：
rgba()函數是平時開發中經常遇到的，這篇文章也做了一個比較詳細的解讀以及一系列的應用。
對它的工作原理做一番分析：就是具有一定透明度的盒子；
還比較了rgba()函數和不透明度屬性（opacity）的區別：使用 opacity，所有子元素都會受到影響；
在實際開發中，有些地方用rgba()函數也更加方便：為網站 header 定制主題、文章標題、按鈕、漸變、子元素、調色盤中的深／淺效果、圖像效果。
最后也指出使用rgba()需要注意的地方：比如兼容性、顏色對比檢查等等。
原文：The Power of the rgba() Color Function in CSS
譯文：CSS技巧-rgba函數的妙用 謝於中 譯
新出現的 CSS 顏色配置函數是一項非常有意思的功能，它給予我們在瀏覽器中直接操縱顏色的能力。例如，當鼠標懸停在按鈕上時，可以使用color: color(black darkness(50%))改變顏色，而不需要使用 Sass 這類 CSS 預處理器。
但是瀏覽器現在對這種顏色函數還不支持，我們只能暫時 使用 PostCSS 將其編譯成常規的顏色。當然，我們也可以使用 CSS 中的rgba()函數達到類似的效果，下面就讓我們看看具體該如何操作。
工作原理
在設計軟件中，如果我們分別將具有一定透明度的白色盒子和黑色盒子放在一個較大的藍色盒子上，它們將分別變成淺藍色和深藍色。
這是因為當小盒子的透明度較高時，前景色和背景色將會混在一起。如果我們將背景色從藍色變成綠色，你能想出結果將會怎樣嗎？
如你所見，當背景色變成綠色時，小盒子的顏色分別變成了淺綠色和深綠色。同理，我們也可以通過改變前景色的透明度來生成更深或更淺的顏色。現在，就讓我們根據這個基本前提，深入研究一些實際例子。
理論結合實際
在上面的例子中，為了保持簡潔，我們只改變了不透明度屬性（opacity）。其實，在實際設計中，更為普遍的是改變rgba()的alpha值。如：
.header { background: rgba(0, 0, 0, 0.5); /* 不透明度為50%的黑色 */ }
在這里我們用的是背景色（background）而不是透明度（opacity），這是因為如果使用 opacity，那么所有子元素都會受到影響，這是應該避免的。(當 opacity 屬性的值應用於某個元素上時，是把這個元素（包括它的內容）當成一個整體看待，即使這個值沒有被子元素繼承。因此，一個元素和它包含的子元素都會具有和元素背景相同的透明度，哪怕這個元素和它的子元素有不同的 opacity 屬性值)。相反，如果使用 background 的 alpha 通道的話，就能保證只更改指定的元素。
注意：在下面的 demo 中，為了讓表述更簡潔，將采用 Sass 中的rgba()函數。如：
.elem { background: rgba(white, 0.5); }
這將被編譯為：
.elem { background: rgba(255, 255, 255, 0.5); }
為網站 header 定制主題
第一個rgba()的使用場景是為網站的 header 定制主題。在 Trello 中，使用rgba()為頭部子元素 (logo, search input, buttons) 的背景色賦值：
.search { background: rgba(255, 255, 255, 0.5); /* 透明度為50%的白色 */ }
有了這個，我們就可以通過只改變 header 背景的顏色來變換主題，因為具有透明度的子元素顏色也將隨之變化。
在我們的例子中，將會采用和 Trello 頭部相似的方式，在開發者工具中進行實驗。
注意在下面兩個 heade r中，子元素的背景色是不同的。通過改變父級元素的背景色，我們可以非常方便的定制 header 主題。
詳情圖片請點擊查看鏈接
請參閱Ahmad Shadeed (@shadeed) 在 CodePen 中創建的 Header demo。
文章標題
在這個例子中，使用rgba()將有助於改變下列元素的顏色：
-
頂部和底部邊框
-
中間包裹元素的背景
-
類別鏈接的背景
.parent { background: #5aaf4c; /* 父級背景 */ box-shadow: inset 0 8px 0 0 rgba(255, 255, 255, 0.5), inset 0 -8px 0 0 rgba(255, 255, 255, 0.5); /* 頂部和底部邊框 */ } .contain { background: rgba(0, 0, 0, 0.1); } .category { background: rgba(255, 255, 255, 0.5); }
例如 Article Header。
按鈕
當定制按鈕的主題時，可以使用rgba()來改變 hover 和 focus 按鈕時邊框和陰影的樣式。
.button { background: #026aa7; box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2); } .button:hover { box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.6), 0 0 8px 0 rgba(0, 0, 0, 0.5); } .button:focus { box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2); }
例如 Buttons。
漸變
另一個有用的場景就是給背景設置純色，然后添加一個帶有rgba()背景色的偽元素，用其生成漸變效果。
.elem { background: green; } .elem:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7)); }
這種方法也可以幫助我們在只改變背景色的前提下模擬漸變動畫效果。
.elem { /* other styles */ animation: bg 2s ease-out alternate infinite; } @keyframes bg to { background: green; } }
請見Ahmad Shadeed (@shadeed) 在 CodePen 中創建的 Gradients。
子元素
如果在 header 中有一個導航列表，我們可以給導航欄添加一個由rgba()定義的背景色。這可以使導航背景透明，從而與父級元素的背景混合。
請見Ahmad Shadeed (@shadeed) 在 CodePen 中創建的 Sub Element。
這種方法也可以被用於實現 hover 效果：
例如 Hover Effect。
調色盤中的深／淺效果
我們可以使用這種方法來生成調色板中的不同色調，只需要在純色盒子上覆蓋一個具有特定rgba()顏色的偽元素即可。
例如 Color Palette。
圖像效果
如果我們想讓一張圖片變的更深或者更淺，同樣可以使用具有rgba()背景色的偽元素。
通過使用彩色背景，我們可以產生一個彩色效果。此外，我們還可以使用mix-blend-mode屬性將背景和圖片混合，從而得到不同的效果。
在使用mix-blend-mode之前，請注意檢查一下兼容性：
.elem:before { background: rgba(0, 0, 0, 1); mix-blend-mode: color; }
如果mix-blend-mode不被支持，圖片將會變成黑色的一塊。所以，這種效果最好被作為一種增強方式，而不是作為一種依賴。使用這種方法時，可以使用@support或者 Modernizr。
@supports (mix-blend-mode: color) { /* your enhanced styles go there */ }
例如 Images 。
使用CSS變量定制主題
如果給父級元素使用 CSS 變量 (自定義屬性)，當變量變化時，所有的子元素都會發生變化。例如：
:root { --brand-color: #026aa7; } /* Checking for the support of CSS Variables */ @supports (--color: red) { .elem { background: var(--brand-color); } }
var colors = ["#026aa7", "#5aaf4c", "#00bcd4", "#af4c4c"]; var colorOptions = document.querySelectorAll(".option"); var colorLabels = document.querySelectorAll(".option + label"); for (var i = 0; i < colorOptions.length; i++) { /* Add an event listener to each radio button */ colorOptions[i].addEventListener('click', changeColor); /* Add a value to each radio button based on colors[] array */ colorOptions[i].value = colors[i]; colorLabels[i].style.background = colors[i]; } function changeColor(e) { /* calling the root element and set the value of a specific property. In our case: --brand-color */ document.documentElement.style.setProperty('--brand-color', e.target.value); }
通過將 CSS 變量和rgba()相結合，我們可以在不給每個元素賦予新顏色的前提下，動態改變布局和顏色。
例如 Header - CSS 變量。
需要考慮的地方
后備顏色
雖然目前瀏覽器對 CSS 顏色的支持度達到了97.39%，但是對於不支持的瀏覽器，也需要給出后備手段。
.elem { background: #fff; background: rgba(255, 255, 255, 0.5); /* 不支持rgba的瀏覽器將會忽略這個命令 */ }
顏色對比檢查
我們應確保元素之間的對比度符合可訪問性標准，畢竟有時使用rgba()將得到難以識別的顏色。可以使用像 Lea Verou 的對比度檢查工具來幫助確定顏色是否滿足可訪問性標准。