grayscale()

Baseline 已广泛支持

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

grayscale() CSS 函数将输入图像转换为灰度。其结果是 <filter-function>。

试一试

filter: grayscale(0);

filter: grayscale(0.2);

filter: grayscale(60%);

filter: grayscale(1);

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

语法

css

grayscale(amount)

参数

amount 可选: 输入图像转换为灰度的程度。它被指定为 <number> 或 <percentage>。值为 100% 将输入完全变为灰度，而 0% 则使输入保持不变。0% 和 100% 之间的值对效果具有线性乘数。用于插值的初始值为 0。默认值为 1。

正式语法

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

示例

grayscale() 的正确值示例

css

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */

grayscale()      /* Completely grayscale */
grayscale(1)
grayscale(100%)

规范

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

浏览器兼容性

另见

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

帮助改进 MDN

了解如何贡献

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

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