Kwamtarin CSS

CSS supports More than 140 color namesas well as hexadecimal values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

RGBA color

The RGBA color value is an extension of RGB color values, with an alpha channel - this channel specifies the opacity of the color.

The RGBA color value is defined as: rgba(red, green, blue, alpha) alpha The parameter is a number between 0.0 (completely transparent) and 1.0 (not transparent).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

The following examples define different RGBA colors:

实例

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Semi-transparent red */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Semi-transparent green */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Semi-transparent blue */

亲自试一试

HSL color

HSL refers to hue, saturation, and lightness (Hue, Saturation, and Lightness).

The HSL color value is defined as: hsl(hue, saturation, lightness).

Hue is the degree on the color wheel (from 0 to 360):

  • 0 (or 360) is red
  • 120 is green
  • 240 is blue

Saturation is a percentage value: 100% is full color.

Brightness is also a percentage value: 0% is dark (black), and 100% is white.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

下面的例子定义了不同的 HSL 颜色：

实例

#p1 {background-color: hsl(120, 100%, 50%);}  /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}  /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}  /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}   /* 淡绿色 */

亲自试一试

HSLA 颜色

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它规定了颜色的不透明度。

HSLA 颜色值由以下参数规定：hsla(hue, saturation, lightness, alpha)，其中 alpha 参数定义不透明度。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

下面的例子定义了不同的 HSLA 颜色：

实例

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* 带不透明度的绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* 带不透明度的浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* 带不透明度的深绿色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* 带不透明度的淡绿色 */

亲自试一试

不透明度

CSS opacity 属性设置整个元素的不透明度（背景颜色和文本都将是不透明/透明的）。

opacity 属性值必须是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

请注意，上面的文本也将是透明/不透明的！

下面的例子显示了带有不透明度的不同元素：

实例

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* 带不透明度的红色 */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* 带不透明度的绿色 */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* 带不透明度的蓝色 */

亲自试一试