此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
grayscale()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年9月.
grayscale() : 对图片进行灰度转换，它是<filter-function> 的子属性。
尝试一下
filter: grayscale(0);filter: grayscale(0.2);filter: grayscale(60%);filter: grayscale(1);<section> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>语法
grayscale(amount)
参数
amount转换值的大小，可以是
<number>或<percentage>. 当值为 100% 时，灰度最大。0% 时与原图没有区别。0% 到 100% 之间的值会使灰度线性变化。amount 为空时使用值为1.
例子
css
grayscale(0) /* 无效果 */grayscale(.7) /* 70% 灰度 */grayscale(100%) /* 灰度最大 */