CSS3滤镜灰度和饱和度有什么区别？

Question

我知道灰度从0到0的范围当然与饱和度从1到0的范围相反,但除此之外,它们的表现完全不同吗？

编辑

我的问题涉及这些过滤器在1-0范围内的行为.他们在内部应用相同的算法还是操作有些不同？我不是要求简单地从MDN引用信息.

编辑2

只是将这些与我的眼睛进行比较,它们看起来略有不同,但我无法确定.

@keyframes fadegrayscale {
  from {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  }
  
  to {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
  }
}

@keyframes fadesaturate {
  from {
    -webkit-filter: saturate(1);
    filter: saturate(1);
  }
  
  to {
    -webkit-filter: saturate(0);
    filter: saturate(0);
  }
}

img.grayscale {
  animation: fadegrayscale 2s linear alternate infinite;
}

img.saturate {
  animation: fadesaturate 2s linear alternate infinite;
}

<img src="http://www.fillmurray.com/200/300" class="grayscale"/>
<img src="http://www.fillmurray.com/200/300" class="saturate"/>

Answer 1

来自MDN

灰阶

将输入图像转换为灰度.'amount'的值定义了转换的比例.100%的值完全是灰度.值0%会使输入保持不变.0%和100%之间的值是效果的线性乘数.如果缺少'amount'参数,则使用值0.

饱和

饱和输入图像.'amount'的值定义了转换的比例.0%的值完全不饱和.值100%会使输入保持不变.其他值是效果的线性乘数.允许超过100%的值,提供超饱和的结果.如果缺少'amount'参数,则使用值1.

范围不是0-1,它是0 - 无穷大(有效).

是的,在功能上,在0 - 1(或0%和100%)之间,两者实际上是彼此的反向/反向,但saturate可以超过100%并且在不能的地方添加 "颜色" grayscale.

img {
  -webkit-filter: saturate(300%);
  filter: saturate(300%);
}

<img src="http://www.fillmurray.com/200/300" />

至于EDITED问题,答案是"不完全".通过操纵颜色矩阵来管理效果,我承认,我并不完全掌握,但根据W3C规范,

灰度

<filter id="grayscale">
  <feColorMatrix type="matrix"
             values="(0.2126 + 0.7874 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0
                     (0.2126 - 0.2126 * [1 - amount]) (0.7152 + 0.2848 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0
                     (0.2126 - 0.2126 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 + 0.9278 * [1 - amount]) 0 0
                     0 0 0 1 0"/>
</filter> 

饱和

<filter id="saturate">
  <feColorMatrix type="saturate"
             values="(1 - [amount])"/>
</filter>

因此,似乎正在为每个计算执行不同的计算.