不透明度颜色 - CSS

CSS 中的不透明度颜色属性可以让开发者指定一个元素的颜色及其不透明度。这对于制作半透明效果非常有用，比如阴影、背景颜色和文本颜色等的调整。

语法

opacity: initial|inherit|value;

其中，

• 初始值（initial）：指定不透明度为 1。这是该属性的预设值。
• 继承值（inherit）：从父元素继承不透明度的值。
• 值（value）：介于 0（完全透明）和 1（完全不透明）之间的数字。

除了 opacity 属性，还有其他一些 CSS 属性可以设置透明度颜色，比如 rgba() 和 hsla() 函数。

rgba() 函数

rgba() 函数可以定义一个颜色，同时指定其不透明度，它是从 0 到 1 之间的值。其中：

• r：表示红色值（0~255）。
• g：表示绿色值（0~255）。
• b：表示蓝色值（0~255）。
• a：表示不透明度（0~1）。

例如：

background-color: rgba(255, 0, 0, 0.5);

它的背景颜色是红色 (#FF0000)，不透明度为 0.5。

hsla() 函数

hsla() 函数同样可以定义一个颜色，同时指定其不透明度。这个函数与 rgba() 的不同之处在于，它使用了颜色的色相、饱和度和亮度（HSL）值，而不是红、绿、蓝（RGB）。其中：

• h：表示色相（0~360）。
• s：表示饱和度（0~100%）。
• l：表示亮度（0~100%）。
• a：表示不透明度（0~1）。

例如：

background-color: hsla(0, 100%, 50%, 0.5);

它的背景颜色是橙黄色 (#FFA500)，不透明度为 0.5。

注意事项

• 不透明度适用于元素及其内容、后代等。因此，如果你将一个元素的不透明度值设置为 0.5，那么该元素用来布局的空间、以及其中的文本内容都将变半透明。
• 另外，opacity 属性也会影响元素的子元素，将它自身的不透明度透过来传递给子元素。
• opacity 属性是不可继承的，但透明度是可以继承的。
• opacity 属性会影响元素的自身宽度和高度，因此在考虑使用它时，应该小心。
• IE8 以及更早版本不支持 rgba() 和 hsla() 函数，但支持 filter: alpha(opacity=x) 的语法。

结论

不透明度颜色属性是 CSS 中非常有用的属性之一，在设计 layout 布局和 UI 元素时，不透明度的灵活使用可以为应用增加视觉层次以及增大交互度的可能性。