随笔- 41 文章- 0 评论- 21 阅读- 12万

css颜色与透明度

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>