1、 css顔色
css顔色由紅、綠、藍三種基色疊加而來。
1.1 rgb:
rgb(red、green、blue)三原色組成,根據這三種顔色組合的不同發光度擷取。取值0-255,每個值有256階,由低到高,0最低,255最高。那總共的組合數是:256×256×256=16777216 種顔色。
示例:rgb(0,0,0) 黑色,rgb(255,0.0) 紅色,rgb(255,192,203) 粉紅色
1.2 rgba:
rgba顔色值是這樣規定的:rgba(red, green, blue, alpha),比ragb多一個alpha(透明度)。alpha 參數是介于 0.0(完全透明)與 1.0(完全不透明)的數字。
示例:rgba(47,222,151,0.3)
1.3 十六進制色
十六進制顔色是這樣規定的:#RRGGBB,其中的 RR(紅色)、GG(綠色)、BB(藍色)十六進制整數規定了顔色的成分。所有值必須介于 0 與 FF 之間。
示例:#000000黑色,css中可以縮寫為#000。#ffffff/#fff 白色。#0000ff 藍色
十六進制顔色表示法6位數字或字母組成,前面加2位表示透明度,取值00-FF。
示例:#7F0000ff 50%透明
透明度參照表:
00% | FF(不透明) | 50% | 7F |
5% | F2 | 55% | 72 |
10% | E5 | 60% | 66 |
15% | D8 | 65% | 59 |
20% | CC | 70% | 4c |
25% | BF | 75% | 3F |
30% | B2 | 80% | 33 |
35% | A5 | 85% | 21 |
40% | 99 | 90% | 19 |
45% | 8c | 95% | 0c |
100% | 00(全透明) |
1.4 hsl顔色
HSLA指的是 hue(色調)、saturation(飽和度)、lightness(亮度) - 表示顔色柱面坐标表示法。
HSLA顔色值是這樣規定的:hsl(hue, saturation, lightness)。
Hue 是色盤上的度數(從 0 到 360) - 0 (或 360) 是紅色,120 是綠色,240 是藍色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同樣是百分比值;0% 是黑色,100% 是白色。
1.5 hsla顔色
HSLA 顔色值是 HSL 顔色值的擴充,帶有一個 alpha 通道 - 它規定了對象的不透明度。HSLA 顔色值是這樣規定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 參數定義不透明度。alpha 參數是介于 0.0(完全透明)與 1.0(完全不透明)的數字。
2、 opacity透明度
顔色的透明度前面已經介紹過,在css中opacity設定html元素的透明度。
- opacity: value|inherit;
value | 規定不透明度。從 0.0 (完全透明)到 1.0(完全不透明)。 |
inherit | 應該從父元素繼承 opacity 屬性的值。 |
rgba的設定的透明度不會被子級元素繼承;opacity設定的透明度會被子級元素繼承。
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:200px;
margin:20px;
padding:10px;
}
.d1
{
background-color:rgba(255,0,0,0.5);
}
.d2
{
background-color:rgb(255,0,0);
opacity:0.5;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<div class="d1">RGBA</div>
<div class="d2">opacity 字型也變透明了</div>
</body>
</html>
View Code
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISM9AnYldnJwAzN9c3Pn5GcuQ0MlQ0MlcnW1JkbMd3Z65EMnRUT0EFRORXTE50dRRVT00EVOh3ZE1UNBRUT5FkaNR3Yq1UNNRVT6hzUPdXQq10dJpHTzkEVPpXR61kdjJjYzpkMMRXOykVdNNjW2hXbZVnTtx0dJRUT5N2ViBXO5xkNNh0YwIFSh9CXt92YuM3YltWas5iclN3Ztl2Lc9CX6MHc0RHaiojIsJye.png)