Home » CSS3 研究室

[CSS3]hsl 及 hsla 顏色

[ 日期： | 瀏覽：18,000 | 迴響：搶沙發 ]
範例 1

在 CSS3 中新增了 HSL 及 HSLA 等兩種跟顏色有關的屬性。其中 H 為 hue(色相)、S 為 saturation(飽合度)、L 為 lightness(亮度)。HSLA 就跟 RGBA 一樣，都是在原本的屬性中多加入了不透明度的設定而已。

檢視原始碼 CSS
1
2
3

hsl(hue, saturation, lightness);
 
hsla(hue, saturation, lightness, opacity);

hue 為整數的角度值，基本上是從 0 到 360 之間，因為它是經過一個簡單的計算來處理所輸入的值：

檢視原始碼 JavaScript
1

(((x mod 360) + 360) mod 360)

所以就算設定是 -10 的話，經過計算後它也會變換成 350。而 0 或 360 表示紅色；60 表示黃色；120 表示綠色；240 表示藍色。

saturation 的表示方式為百分比(%)；100% 就是最大飽合度，而 0% 則為灰色調。lightness 的表示方式也一樣是百分比(%)；以 50% 為正常亮度為分界，百分比越高則會越接近白色(100%)，而百分比越低則會越接近黑色(0%)。而 opacity 透明度允許的值為 0 到 1 之間帶有小數的數值。

一樣來看個簡單的範例：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9

<body>
	<div class="hsl1">hsl(0, 50%, 50%)</div>
	<div class="hsl2">hsl(240, 80%, 50%)</div>
	<div class="hsl3">hsl(30, 100%, 50%)</div>
	<div class="hsla1">hsla(0, 100%, 0%, 0.8)</div>
	<div class="hsla2">hsla(210, 100%, 50%, 0.8)</div>
 
	<div id="log"></div>
</body>

來看看 CSS 的用法：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

div {
	width: 220px;
	height: 50px;
	float: left;
	margin-right: 10px;
	line-height: 50px;
	text-align: center;
	border: 1px solid #000;
}
.hsl1 {
	color: hsl(0, 100%, 100%);
	background-color: hsl(0, 100%, 50%);
}
.hsl2 {
	color: hsl(0, 100%, 100%);
	background-color: hsl(240, 50%, 50%);
}
.hsl3 {
	background-color: hsl(30, 100%, 50%);
}
.hsla1 {
	color: hsl(0, 100%, 100%);
	background-color: hsla(0, 100%, 0%, 0.8);
}
.hsla2 {
	background-color: hsla(210, 100%, 50%, 0.8);
}

基本上的用法就跟 rgb() 及 rgba() 一樣。但有趣的是，當筆者嘗試使用 jQuery 取出顏色值時，原本用 hsl() 或 hsdl() 來設定的都會是轉換成 rgb() 及 rgba() 後的值。

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8

$(function(){
	var str = '';
	$('div:not(#log)').each(function(){
		var $this = $(this);
		str += '.' + $this.attr('class') + ' : ' + $this.css('background-color') + '<br />';
	});
	$('#log').html(str);
});

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響