半透明與透明效果設計 - CSS rgba, hsla 色彩單位 (CSS color units) [2*]－網頁藝術思考

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

說明： rgba 及 hsla 為 css level 3 (css 3) 起，新一代表示色彩的單位 (color units)，最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值；顏色的指定，當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等，這讓以往網頁設計需要繁瑣過程的半透明效果變得簡單輕鬆多了。本篇也附帶討論舊式未支援的瀏覽器，可做到類似效果的幾種設計概念。
適合：有 html 及 css 語法基礎概念者。
難度：
更新：2011-06-12
支援： firefox, safari, google chrome, opera 10, ie9 (至更新時) 。

有二種表示方式：

rgba(red 值, green 值, blue 值, alpha 值)

red, green, blue 值

可以是 0 ~ 255 的整數值，與一般 8 位元顏色的十進位值相同，惟這類表示法不接受十六進位值 (如 ff, 8c) ；也可以是 0% ~ 100% 的百分比值。所以例如， rgb(128,128,128) = rgb(50%,50%,50%) = #808080 。

alpha 值 (alphavalue)

0.0 ~ 1.0 允許小數一位的數值， 0 →完全透明， 1 →完全不透明， 0.7 → 70% 不透明。 w3c 沒有明確地表示是否允許小數一位以上的數值，不過 firefox 小數二位的數值也可以呈現，真是令人讚賞。

語法實例：

rgba(255, 0, 0, 0.6) → 不透明度 60% 紅色

rgba(0%, 0%, 100%, 0.4) → 不透明度 40% 藍色
hsla(hue 值, saturation 值, lightness 值, alpha 值)

hue 值 (色相值)

以整數「角度」值表示，但是不加「°」角度符號。 0 或 360 →紅色， 60 →黃色， 120 →綠色， 240 →藍色，就好像彩虹色繞成一個圓。如同數學角度，負值或超過 360 是允許的，不過這樣用好像是有點自找麻煩。

saturation 值 (飽和度值)

0% ~ 100% 的百分比值， 0% →灰色調， 100% →最大飽和度。所以 0% 時，不論 hue 值是多少，都會以灰階單色呈現。

lightness 值 (亮度值)

0% ~ 100% 的百分比值， 0% →最暗 (暗黑)， 100% →最亮 (亮白)， 50% →正常亮度。 50% 以上漸漸增加白色， 50% 以下漸漸增加黑色。

alpha 值 (alphavalue)

0.0 ~ 1.0 允許小數一位的數值。

語法實例：

hsla(0, 100%, 50%, 0.3) → 不透明度 30% 紅色

hsla(120, 100%, 20%, 0.4) → 不透明度 40% 暗綠色

hsla(240, 0%, 50%, 0.6) → 不透明度 60% 中亮灰色

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" 可以有三種選擇：

sizingMethod="image" ：不論所在元素的 Box 大小，圖片一律以圖片本身尺寸完整顯示。如果 Box 尺寸大於圖片， Box 超過圖片的區域會被「裁掉」不顯示；如果 Box 尺寸小於圖片， Box 會保持尺寸，不會增大，而圖片則會「突出」 Box 範圍。這個定義是預設值，所以沒有 sizingMethod 這段時，仍會套用此定義。
sizingMethod="scale" ：圖片會自動依據元素的 border box 尺寸縮放，所以圖片呈現可能會寬高不等比例變形。
sizingMethod="crop" ：圖片會保持圖片本身尺寸，但是圖片超出 Box 範圍的部分，不會顯示，類似 css 定義背景圖片的呈現方式。

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

參考資源

CSS 3 Color Units - w3c 官方文件 (英文) 。

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

不老師

網頁藝術思考 - CSS 網頁設計藝術

不老師發表在痞客邦留言(8) 人氣()

E-mail轉寄

網頁藝術思考 - CSS 網頁設計藝術

把玩 css 網頁視覺設計、矜持 w3c 網頁標準語法 (html)、體認友善的無障礙網頁 (accessibility)。靜墨的荒莫～不老師