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

  • 說明: rgbahslacss level 3 (css 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等,這讓以往網頁設計需要繁瑣過程的半透明效果變得簡單輕鬆多了。本篇也附帶討論舊式未支援的瀏覽器,可做到類似效果的幾種設計概念。
  • 適合:有 htmlcss 語法基礎概念者。
  • 難度:等級2
  • 更新:
  • 支援: 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; 才會作用。

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

不惑仔 發表在 痞客邦 PIXNET 留言(7) 人氣()