有二種表示方式：
|
- 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% 中亮灰色
|
|
| 未支援 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);
} |
| 未支援的瀏覽器只會執行第一項不透明顏色的定義，第二項會略過不產生任何影響；對於有支援半透明色彩的瀏覽器，雖然兩項定義都有效，但當然是以最後一項為執行的依據；所以，注意兩項順序顛倒就不會有半透明效果囉。這種作法，至少未支援的瀏覽器不至於結果差距太多。 |
0 Response to "半透明與透明效果設計- CSS rgba, hsla 色彩單位"
張貼留言