颜色与透明度
字数: 0 字 时长: 0 分钟
简介
CSS3 提供了多种方式来设置颜色和透明度，本文将介绍这些方法。
颜色的表达方法
RGB 表示法
- 使用红（R）、绿（G）、蓝（B）三种颜色的叠加来生成各种颜色。
例如：rgb(255, 0, 0)表示红色。
RGBA 表示法
- RGBA 是 RGB 的扩展，它增加了一个 Alpha（透明度）通道。
语法：rgba(red, green, blue, alpha)
red、green、blue 的取值范围是 0 到 255，代表红、绿、蓝三种颜色的强度。 alpha 的取值范围是 0 到 1，代表透明度，0 表示完全透明，1 表示完全不透明。 例如：rgba(255, 0, 0, 0.5)表示半透明的红色。
HSL 表示法
- 使用色相（Hue）、饱和度（Saturation）、亮度（Lightness）三个参数来定义颜色。
例如：hsl(120, 100%, 50%)表示绿色（色相为 120 度，饱和度为 100%，亮度为 50%）
HSLA 表示法
HSLA 是 HSL 的扩展，它也增加了一个 Alpha（透明度）通道。
语法：hsla(hue, saturation, lightness, alpha)。- hue 的取值范围是 0 到 360 度，代表色相。
- saturation 和 lightness 的取值范围是 0%到 100%，分别代表饱和度和亮度。
- alpha 的取值范围是 0 到 1，代表透明度。
例如：hsla(120, 100%, 50%, 0.5)表示半透明的绿色。
透明度的表达方法
RGBA/HSLA
- 如前所述，RGBA 和 HSLA 颜色值中都包含了 Alpha 通道，可以直接设置透明度。
opacity
opacity属性用于设置一个元素的透明度级别。语法：opacity: value。
value 的取值范围是 0 到 1，0 表示完全透明，1 表示完全不透明。
例如：opacity: 0.5表示元素半透明。
注意：opacity 属性会影响元素及其所有子元素的透明度，且该属性具有继承性。
filter
filter属性定义了元素的可视效果，包括模糊、亮度、对比度等，其中也包括透明度效果（opacity()函数）。语法：filter: opacity(value%)。
value 的取值范围是 0 到 100，0%表示完全透明，100%表示图像无变化。
例如：filter: opacity(50%)表示元素半透明。
注意
filter属性通常只影响元素自身的渲染效果，而不会影响到其子元素（尽管在某些情况下，子元素的渲染也可能会受到间接影响）。此外，filter属性可能会触发硬件加速，从而提升性能。