码农教程 - 一技在手,衣食无忧! tools

目录

CSS 颜色

❮ 上一节 下一节 ❯

CSS 支持140 多种颜色名称、十六进制值、RGB 值、RGBA 值、HSL 值、HSLA 值和不透明度。

RGBA 颜色

RGBA 颜色值是带有 Alpha 通道的 RGB 颜色值的扩展 - 它指定颜色的不透明度。

RGBA 颜色值通过以下方式指定：rgba(red, green, blue, alpha)。 alpha 参数是 0.0（完全透明）和 1.0（完全不透明）之间的数字。

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

以下示例定义了不同的 RGBA 颜色：

示例

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
亲自试一试 »

HSL 颜色

HSL 代表色相、饱和度和亮度。

HSL 颜色值通过以下方式指定：hsl(色调、饱和度、亮度)。

  1. 色调是色轮上的一个度数（从 0 到 360）：
    • 0（或360）为红色
    • 120是绿色的
    • 240是蓝色
  2. 饱和度是一个百分比值：100% 是全色。
  3. 亮度也是一个百分比； 0% 为深色（黑色），100% 为白色。
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

以下示例定义了不同的 HSL 颜色：

示例

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
亲自试一试 »

HSLA 颜色

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

HSLA 颜色值通过以下方式指定：hsla(色调、饱和度、亮度、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);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
亲自试一试 »

不透明度

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

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

rgb(255, 0, 0);不透明度:0.2;
rgb(255, 0, 0);不透明度:0.4;
rgb(255, 0, 0);不透明度:0.6;
rgb(255, 0, 0);不透明度:0.8;

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

以下示例显示了具有不透明度的不同元素：

示例

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
亲自试一试 »

通过练习测试一下

练习:

插入 <h1> 元素的全红色背景颜色的 RGBA 颜色值，不具有透明度。

<style>
h1 {
  background-color: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习


❮ 上一节 下一节 ❯