修改

我的问题涉及这些过滤器在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 spec是

灰度

<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>

因此出现正在为每个人执行不同的计算。

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

修改

编辑2

1 个答案: