2013
10
14

CSS3 快速便利完成顏色設定與透明度設定

關鍵字:HTML網頁設計CSS3HTML網頁技術

還在為惱人的顏色與透明度寫了超過兩行的CSS嗎?
CSS3在顏色色定上新增了HSL寫法與alpha的值,讓設計師們可以更便利的指定所想要的顏色以及透明度。

一般再寫網頁的時候,不論是文字或背景,經常會使用到許多顏色。而一般最常使用的是,利用色碼指定顏色,另一種則是使用RGB的格式來指定顏色。

在CSS3中,提供了5種不同指定顏色的方法,分別為以下:
RGB(in css2):red、green、blue
RGBA:red、green、blue、alpha
HSL:hue、saturation、lightness
HSLA:hue、saturation、lightness、alpha
CMYK:cyan、magenta、yellow、black

以下介紹RGB、RGBA、HSL以及HSLA:
支援:firefox, safari, google chrome, opera 10

RGB(in css2):
RGB這三個字中的R表示Red(紅色)、G表示Green(綠色)、B表示Blue(綠色)。
RGB色彩格式就是利用這三種顏色,來調整我們所需的顏色。
每個顏色的值介於0到255或者0%100%
寫法:
background:rgb(255,0,0);
background:rgb(100%,0%,0%);

RGBA:
是RGB顏色模式,再加上alpha(透明度)這個值,來指定顏色的不透明度。
寫法0.0~ 1.0 允許小數1位的數值, 0:完全透明,1:不透明, 0.7 → 70% 不透明。
W3C 沒有明確地表示是否允許小數一位以上的數值,不過 firefox 小數二位的數值也可以呈現,真是令人讚賞。
RGB與RGBA的不同是,RGBA不能以16進位來標記他的值。
寫法:
background:rgba(255,0,0,0.5);
background:rgba(100%,0%,0%,0.5);

HLS:
CSS3新增了HSL(Hue-Saturation-Lightness,色調-飽和度-亮度)的顏色來補全RGB的色彩
H:hue 值 (色相值),在色環中的一個角度,以整數「角度」值表示,但不加「°」角度符號。 0或360:紅色,60:黃色,120:綠色,240:藍色,就好像彩虹色繞成一個圓。
如同數學角度,負值或超過 360則以x-360來計算,不過這樣有點自找麻煩。

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

L:lightness值(亮度值)
0% ~ 100% 的百分比值,0%:最暗 (暗黑), 100%:最亮 (亮白), 50%:正常亮度。
50%以上漸漸增加白色, 50%以下漸漸增加黑色
寫法:
background:hsl(0,100%,50%);

HLSA:
是HLS顏色模式,再加上alpha(透明度)這個值,來指定顏色的不透明度。
0.0 ~ 1.0 允許小數一位的數值。
寫法:
background:hsla(0,100%,50%,0.5);

以下範例提供大家作為比較:



上面一排是沒有設定alpha值的純色區塊。
下面一排是設定了alpha值的半透明區塊。

分別由左到右的寫法為:16進位色碼指定、RGB、HSL

在RGB或HSL加上alpah值是不是方便許多呢?
往常用16進位色碼寫法,要再加上透明度的時候必須多寫上opacity這個值,也還不是每個個瀏覽器都支援,又必須針對不同的瀏覽器去寫不同的設定。

CSS3是不是令我們方便許多!

文章內容截自:
http://i.see-design.com.tw/2011/04/css-rgba-hsla.html
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所