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 在 CodePen 中創建的 Gradients 。
子元素
如果在 header 中有一個導航列表，我們可以給導航欄添加一個由 rgba() 定義的背景色。這可以使導航背景透明，從而與父級元素的背景混合。
請見Ahmad 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 的 對比度檢查工具 來幫助確定顏色是否滿足可訪問性標準。
來自：http://web.jobbole.com/89673/