opacity()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

The 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属性类似，区别在于有了 filters，有些浏览器会提供硬件加速以获取更好的性能表现。

语法

opacity(amount)

参数

amount

转化的数值，要求是一个 <number> 或一个 <percentage>（百分比）。值为 0% 是完全透明的，值为 100% 会保留原来的效果。值在 0% 与 100% 之间效果为线性变化的，参数的最小差值为 1。

Examples

css
opacity(0%)   /* 完全透明*/
opacity(50%)  /* 50% 透明 */
opacity(1)    /* 无效果 */

See also