CSS | 不透明度/透明度

在 CSS 中，我们可以使用 opacity 属性控制一个元素的不透明度/透明度。这个属性接受一个介于 0 到 1 之间的数字作为值。

• 当值为 1 时，元素是不透明的，即完全可见。
• 当值为 0 时，元素是完全透明的，即完全不可见。
• 当值在 0 和 1 之间时，元素是半透明的，即可见但不完全透明。

以下是一个例子：

<div class="box"></div>

.box {
  background-color: red;
  opacity: 0.5;
}

这会使 .box 元素半透明，红色的背景颜色会变得不那么鲜艳。

还有一个属性叫做 rgba()，它可以让我们以更为复杂的方式控制元素的透明度。它接受四个参数，前三个是 RGB 颜色值，最后一个是介于 0 到 1 之间的数值，代表透明度。以下是一个例子：

<div class="box"></div>

.box {
  background-color: rgba(255, 0, 0, 0.5);
}

这会使 .box 元素半透明，背景颜色是红色（RGB 中的红色），不过不同于 opacity 属性，它不会影响元素内的文本或其他内容的透明度。

总的来说，opacity 和 rgba() 是控制元素不透明度/透明度的两种基本方式。它们可以被用来创建一些很酷的效果，例如淡化背景图像，模糊元素，或是在深色背景上显示轻色文本等等。