opacity()

Baseline 已广泛支持

此特性已非常成熟，可在多种设备和浏览器版本上使用。自 ⁨2016 年 9 月⁩以来，它已在各大浏览器中可用。

opacity() CSS 函数对输入图像中的采样应用透明度。它的结果是一个 <filter-function>。

试一试

filter: opacity(1);

filter: opacity(80%);

filter: opacity(50%);

filter: opacity(0.2);

filter: opacity(0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

注意：此函数类似于更成熟的 opacity 属性。区别在于使用滤镜时，某些浏览器会提供硬件加速以获得更好的性能。

语法

css

opacity(amount)

参数

amount 可选: 转换量，指定为 <number> 或 <percentage>。值为 0% 时完全透明，而值为 100% 时输入不变。0% 到 100% 之间的值是对效果的线性乘数。插值的初始值为 1。默认值为 1。

正式语法

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )

示例

opacity() 的正确值示例

css

opacity(0%)   /* Completely transparent */
opacity(50%)  /* 50% transparent */

opacity()     /* No effect */
opacity(1)

规范

规范
滤镜效果模块第 1 级 # funcdef-filter-opacity

浏览器兼容性

另见

在 filter 和 backdrop-filter 属性值中可用的其他 <filter-function> 函数包括：
CSS opacity 属性

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者于 2025 年 10 月 10 日最后修改。

在 GitHub 上查看此页面 • 报告此内容的问题