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 id="default-example">
<img
class="transition-all"
id="example-element"
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%) /* 灰度最大 */