css透明度设置三种方法

css 中设置透明度的三种方法：opacity 属性：直接设置元素透明度（0 为全透，1 为全不透）rgba() 函数：设置元素颜色并指定透明度（透明度范围为 0-1）filter: alpha(opacity=x)（仅限 ie）：指定一个 0-100 的值，0 为全透，100 为全不透

CSS 透明度设置的三种方法

CSS 透明度决定了元素的可见程度。有三种方法可以在 CSS 中设置透明度：

方法 1：opacity 属性

此属性直接设置元素的透明度。接受的值范围为 0 到 1，其中 0 表示完全透明，1 表示不透明。

立即学习“前端免费学习笔记（深入）”；

element {
  opacity: 0.5;
}

方法 2：rgba() 函数

rgba() 函数设置元素的背景或文本颜色，并指定透明度。接收四个参数：红、绿、蓝和 alpha 通道（透明度）。alpha 通道的范围为 0 到 1。

element {
  color: rgba(null, 0, 0, 0.5);
}

方法 3：filter: alpha(opacity=X)（仅适用于 Internet Explorer）

此方法仅适用于 Internet Explorer 浏览器。它接受一个从 0 到 100 的值，其中 0 表示完全透明，100 表示不透明。

element {
  filter: alpha(opacity=50);
}

使用示例

下表显示了使用不同方法设置不同透明度级别的示例：

兼容性

opacity 属性在所有现代浏览器中都得到广泛支持。rgba() 函数在所有现代浏览器中同样得到支持。filter: alpha(opacity=X) 方法仅适用于 Internet Explorer 9 及更早版本。