CSS opacity 属性

CSS opacity 属性指定了一个元素的不透明度。它可以让元素变得更加透明或不透明。这个属性接受值从 0（完全透明）到 1（完全不透明），并且也可以接受百分比值。

语法

opacity: value;

其中，value 可以是一个 0 到 1 的数字，也可以是一个 0% 到 100% 的百分数。

示例

以下是一些根据不同 opacity 值设置的样例：

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

注意事项

• 通过使元素的不透明度减小，让元素淡出是常见的用法。
• 不透明度的变化也会影响元素的子元素。
• 如果想要让一个元素半透明但不影响其中的文本内容，可以使用 rgba 颜色来代替 opacity 属性，例如：

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

这里的最后一个参数是 alpha 通道，指定了透明度。

总结

CSS opacity 属性提供了一种在网页上调整元素不透明度的简单方法，通过调整 opacity 值可以创建出不同的视觉效果。