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>
View Code

 

 

原文地址:https://www.cnblogs.com/tongyi/p/13632880.html