css color units (css rgba, hsla 色彩單位) - 半透明與透明效果設計

具有半透明值 (alpha 色版) 的 css 3 顏色單位

有二種表示方式：

transparent 值 - 完全透明的關鍵字 (keyword) 值

alpha 值 = 1 時，完全不透明，實際上就等同沒有半透明 alpha 值的定義一樣，例如 rgba(255,0,0,1) = rgb(255,0,0) = #ff0000 。

alpha 值 = 0 時，完全透明，像似 css 2 的關鍵字 (keyword) 值 transparent ，當然不管是什麼顏色，透明都是看不見的；不過， transparent 代表的是透明黑色，即 transparent = hsla(0,0%,0%,0) = rgba(0,0,0,0) 。所以，這也就意味前景色 (color) 特性 (property) 也接受 transparent 值了，如 color:transparent; 或 color:rgba(0,0,0,0); ，而這在 css level 2 是不允許的。

思考 - 背景半透明效果輕鬆設計： css color module level 3

顏色單位 (color units) 在 css 設計裡，主要運用在指定背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) ，而多了可以直接定義顏色不透明度 (opacity) 的模式，設計背景半透明效果可說是輕而易舉。

半透明背景色 (background-color) 效果

直接看範例一 xhtml
<div id="st1" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
   …以下略，實際內容見範例內…
  </p>
 </div>
</div>
共同基本的 css 定義
html, body, h1, h2, h3 {
 margin: 0px;
 padding: 0px;
}
h1 {
 font-size: 100%;
 font-weight: normal;
}
p{
 margin-top: 1em;
 margin-bottom: 1em;
}
h1,p{
 padding: 1em 1.25em;
}
.st {
 color: white; /*文字白色*/
 /*div.st加背景圖片並定義與圖片同尺寸*/
 background: url(圖片檔案位址) no-repeat center;
 height: 534px;
 width: 800px;
 overflow: auto; /*內容超過高度時產生捲軸*/
 margin: 1.2em auto 0;
 text-align: justify;
 border:1px solid rgb(60%,60%,60%);
 border-right:none;
}
css 定義半透明背景色 (background)
#st1 .inner {
 padding: 1em 4%;
}
/*標題 h1, 段落 p 加半透明背景色*/
#st1 h1 {
 background: rgba(30%,0%,0%,0.6);
}
#st1 p {
 background: rgba(0%,10%,20%,0.6);
}

實際呈現可參閱 [範例一] ←沒看到應該有的效果？

多層半透明色重疊效果 - 背景加上邊線色 (border-color)

共同的 css 定義與範例一相同。

範例二 xhtml
<div id="st2" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
     …以下略，實際內容見範例內…
  </p>
 </div>
</div>
css 增加定義半透明邊線色 (border)
#st2 .inner {
 padding-bottom: 0.25em;
}
/*半透明背景色與例一雷同*/
#st2 h1 {
 background: rgba(40%,0%,0%,0.6);
 border-top: 2em solid;
 border-right: 260px solid;
 border-bottom: 0.5em solid;
 border-color: rgba(100%,100%,100%,0.2); /*20%白色*/
} /*三邊加上不同寬度的 border*/
#st2 p {
 background: rgba(0%,10%,20%,0.6);
 border-top: 12px solid rgba(100%,100%,100%,0.4);
 border-right: 12px solid rgba(55%,55%,65%,0.4);
 border-bottom: 12px solid rgba(30%,30%,40%,0.4);
 border-left: 12px solid rgba(80%,80%,90%,0.4);
} /*四邊加上40%不同顏色的 border*/

實際呈現可參閱 [範例二] ←沒看到應該有的效果？

需要了解的是， css 指定元素的背景色或背景圖片 (background) 會顯示在 border edge 區域以內，也就是說， border 色與 background 色是重疊的，當 border 顏色定義成半透明時，就會與其後方背景顏色產生混合。在範例二中， h1 加了 20% 半透明白色 border ，但實際呈現的是疊合了暗紅的半透明背景色，因而，在最後面的背景圖片被不同的半透明顏色覆蓋，而產生不同的層次感，並且因為寬度不同的 border 而使設計更具活潑感；而 p 則在四邊運用不同的顏色與背景色混合，讓背景圖片產生較立體的半透明視覺效果。

這樣的雙層半透明網頁設計效果，只在一個元素 (element) 上定義樣式 (styles) 就可輕易完成，沒有 css level 3 時根本困難重重。

文字半透明 (color) 效果

顏色單位 (color units) 當然可以用在 css color 特性 (property) ， color 通常用來指定文字的顏色，所以也就可以讓文字變成半透明了。

共同的 css 定義與範例一相同。

範例三 xhtml
<div id="st3" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
     …以下略，實際內容見範例內…
  </p>
 </div>
</div>
css 把標題首字變半透明色 (color)
#st3 h1::first-letter {
 /* h1 第一個字變粗大且半透明呈現*/
 font: 900 900% "標楷體",simhei,"細明體";
 vertical-align: -8%;
 color: rgba(85%,100%,100%,0.5); /*50%亮藍*/
}
/*半透明背景及邊線,與前例雷同*/
#st3 h1 {
 background: rgba(40%,0%,0%,0.4);
 border-bottom: 20px solid rgba(50%,20%,30%,0.4);
 border-left: 60px solid rgba(50%,20%,30%,0.4);
 padding: 1em 1.25em 0 0;
}
#st3 p {
 background: rgba(0%,10%,20%,0.6);
 border-top: 12px solid rgba(100%,100%,100%,0.4);
 border-right: 12px solid rgba(55%,55%,65%,0.4);
 border-bottom: 12px solid rgba(30%,30%,40%,0.4);
 border-left: 12px solid rgba(80%,80%,90%,0.4);
}

實際呈現可參閱 [範例三] ←沒看到應該有的效果？

當然，半透明文字的顏色也會與背景色疊合成另一個半透明色，再讓最後面的背景圖片穿透上來。

css 3 hsla 讓定義色彩及明暗度更直覺

以色相、飽和度、亮度 (Hue, Saturation, Lightness - HSL) 指定顏色，也是 css 3 開始有的顏色單位，與色彩模型中的 HSB 有些類似，或許還有很多人不太習慣，不過許多情況它還挺方便用的。

共同的 css 定義與範例一相同。

範例四 xhtml
<div id="st4" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
     …以下略，實際內容見範例內…
  </p>
 </div>
</div>
css 改變半透明色的飽和度及亮度
#st4 .inner {
 padding: 1em 4%;
}
#st4 h1 {
 background: hsla(120,60%,20%,0.6);
 border-top: 1.5em solid hsla(120,40%,12%,0.3);
 border-right: 80px solid hsla(120,40%,50%,0.3);
} /*背景及邊線都是綠色調*/
#st4 p {
 background: hsla(0,70%,30%,0.7);
 border-right: 80px solid hsla(0,70%,80%,0.2);
} /*背景及邊線都是紅色調*/

實際呈現可參閱 [範例四] ←沒看到應該有的效果？

很多時候需要以同一種色調 (Hue or Tone)，呈現出不同明暗度的感覺，讓視覺上更有層次及立體感，範例中使用 hsla 定義顏色會是個好方法。眼尖的人應該已經看出，h1 或是 p 中指定的色相值 (Hue) 都是一樣的，也就是說用了同一種色調，而只是單純地在背景色 (background) 或是 border 定義不同的亮度值 (Lightness)，就可以產生更有深度的視覺效果；而如果希望降低或增加顏色的鮮艷度，如範例中只需要指定較低或較高的飽和度值 (Saturation) 就可以了， h1 就只是稍微改變了飽和度。使用 hsl 定義顏色，確實可以讓我們省卻不斷地挑選 rgb 顏色的麻煩，因為只要決定一個顏色，剩下就由亮度或飽和度來調整就可以了。

未支援 rgba, hsla 的瀏覽器也想半透明效果

未支援具有半透明 alpha 值色彩單位 (color units) 的瀏覽器，如果使用 rgba, hsla 指定色彩，只會略過該項定義，但不會因此而影響樣式表 (style sheets) 裡其它的定義。因此，我們可以另外替未支援的瀏覽器定義一組色彩，以範例一背景定義為例：

css 增加定義給未支援瀏覽器
#st1 h1 {
 background: rgb(30%,0%,0%); /*未支援瀏覽器指定不透明色*/
 background: rgba(30%,0%,0%,0.6);
}
#st1 p {
 background: rgb(0%,10%,20%); /*未支援瀏覽器指定不透明色*/
 background: rgba(0%,10%,20%,0.6);
}

未支援的瀏覽器只會執行第一項不透明顏色的定義，第二項會略過不產生任何影響；對於有支援半透明色彩的瀏覽器，雖然兩項定義都有效，但當然是以最後一項為執行的依據；所以，注意兩項順序顛倒就不會有半透明效果囉。這種作法，至少未支援的瀏覽器不至於結果差距太多。

以 png 格式半透明圖片作為背景

未支援的瀏覽器如果也想要有類似前述半透明效果的背景顏色，只要先製作一個很小的 png 格式的半透明圖片，例如 10×10 px 不透明度 (opacity) 70% 的黑色圖片 [圖例下載→ ] ，然後定義成背景圖片 (background-image)。以範例一的 p 為例：

css 改成定義背景為半透明 png 圖片
#st1 p {
 background: url(bg_bk70.png); /*未支援瀏覽器指定半透明背景圖片*/
 background: rgba(0,0,0,0.7); /*70%黑色*/
}

第一項除了 ie 6 沒辦法「正確」呈現外，其實較新型瀏覽器 (包括 ie 7) 都會有半透明黑色背景，唯一有點不方便的是，如果定義不同顏色的半透明背景，每次都必須製作不同的半透明 png 圖片。實際上，只需要第一項就可以在各家瀏覽器達到半透明背景的效果了。加上第二項將會更好，因為也可以讓有支援 alpha 值的瀏覽器直接運用更便利的 css 半透明顏色定義方式，對未來更有幫助，第二項的定義會將背景圖片 (background-image) 變成預設值 none (無)。

css 3 的 opacity 不透明度特性，像這樣 opacity:0.7; ，如果想要運用在此處，其實不是很恰當，因為 opacity 的定義會使整個元素 (element) 都變成半透明，包括內容裡的文字，如此可能影響閱讀，目前卻有很多人使用這種方法，有點匪夷所思，有興趣可以參閱久久前的某一個討論，裡面也有提到麻煩的 opacity 處理方式及以下將會提到的 ie filter 中的 alpha opacity。

filter 中的 alpha(opacity) 不透明度指定給 ie 6

ie 6 就需要用到 ie 專用 (ie only) 的 css filter 語法中 alpha 的不透明度 opacity ，不過這個方法也是整個元素 (element) 都會半透明呈現，而且元素必須指定 hasLayout property ；也由於是特定給 ie 6 的設計，所以最好運用 css hacks 技巧：

css 接著前例，定義半透明給 ie 6
* html #st1 p {
 background: rgb(0,0,0); /*背景黑色，也讓先前指定的背景圖片回復沒有*/
 zoom: 1; /*hasLayout*/
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); /*70%不透明度*/
}

這是 ie 專用 (ie only) 語法， 所以其實 ie 7 也可以用。麻煩的問題是裡面文字內容也半透明了，雖然有一奇特方法， css 定義其內層元素 (element) 為 position: relative; 就可讓裡面內容回復成不透明。但是像範例中的 p ，內層沒有可定義的元素 (element) 也就沒輒了，其實部落格設計也會遇到沒辦法自己增加元素的問題。另外，像範例中有捲軸產生捲動內容，但是在 ie 如果內層定義成 position: relative; ，該元素 (element) 就像是「固定」在原位，不會隨捲軸捲動了。所以，指定 ie 這個特性時，只能多注意一點囉。

ie 6 也使用半透明 png 圖片作背景

另一種 ie 專用 (ie only) 的 css filter 語法中 AlphaImageLoader ，可以讓 ie 6 「較正確」呈現半透明 png 圖片，不過圖片會「插在」背景 (background) 及內容 (content) 之間，所以如果原先有指定背景，會變成像似兩個重疊的背景：

css 改成「插入」半透明 png 圖片當背景
* html #st1 p {
 background: none; /*先前指定的背景圖片改回沒有*/
 zoom: 1; /*hasLayout*/
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg_bk70.png",sizingMethod="scale");
 /*插入圖片並縮放至與元素同尺寸*/
}

圖片會由所在元素的 border box 左上角開始插入。語法中 filter 內的 src="bg_bk70.png" (綠字) ，明顯地，雙引號內就是指出圖片檔的位址。而 sizingMethod="scale" 可以有三種選擇：

看起來似乎達到想要的半透明背景效果，也不會讓內容文字也變半透明。這樣的作法只是為了讓原本不能正確呈現的 ie 也能有我們想要的效果，嚴格說起來應算是 ie 的旁門左道，並非 w3c 標準規範。怪的是 ie 仍有不可預期的問題，使用時要先有心理準備就是了，像是內容如果包括需要滑鼠感應的元素 (如按鈕、輸入項之類) ，會變成無法執行，又得以 css 指定這類元素 position:relative; 才會作用。

參考資源
散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。