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

Question

我知道灰度的 0-1 范围当然与饱和的 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

灰度

Converts the input image to grayscale. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.

饱和

Saturates the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results. If the ‘amount’ parameter is missing, a value of 1 is used.

范围不是 0-1，而是 0 - 无穷大(有效)。

是的，在功能上，在 0 - 1(或 0% 和 100%)之间，这两者实际上是彼此的反向/反向，但饱和可以超过 100% 并且添加 “颜色”，其中 grayscale 不能。

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

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

至于已编辑的问题，答案是“不完全是”。这些效果是通过颜色矩阵的操作来管理的，我承认，我并不完全掌握，但是，根据 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>

所以它会出现对每个执行不同的计算。