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

I am aware that grayscale's range from 0-1 is of course the opposite of saturate's range from 1-0, but other than that do they behave at all differently?

我知道grayscale的0-1范围当然与饱和的0-1范围相反，但是除此之外他们的行为有什么不同吗?

Edit

My question pertains to the behavior of these filters within the range of 1-0 specifically. Do they apply the same algorithm internally or is the manipulation somehow different? I'm not asking for information to simply be quoted from MDN.

我的问题是关于这些过滤器在1-0范围内的行为。它们是在内部应用相同的算法，还是操作方式不同?我不是要求从MDN中简单地引用信息。

Edit 2

Just comparing these with my eyes, they look slightly different but I can't be sure.

和我的眼睛相比，它们看起来有点不同，但我不确定。

@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"/>

1 个解决方案

#1

From MDN

从MDN

Greyscale

灰度

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.

将输入图像转换为灰度。“amount”的值定义了转换的比例。100%的值是完全灰度的。0的值保持输入不变。0%到100%之间的数值是线性乘数效应。如果“amount”参数丢失，则使用0的值。

Saturate

饱和

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.

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

The range is not 0-1 it's 0 - infinity (effectively).

范围不是0-1而是0-∞(有效)

Yes, functionally, between 0 - 1 (or 0% and 100%) the two are effectively the reverse/inverse of each other but saturate can exceed 100% and add "color" where grayscale cannot.

是的，在功能上，在0 - 1(或0%和100%)之间，两者实际上是相反的/相反的，但是饱和度可以超过100%，并在灰度不允许的地方添加“颜色”。

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

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

As for EDITED question the answer is "not quite". The effects are managed through manipulation of a color matrix which, I confess, I am not fully to grips with but, per the W3C spec is

对于编辑过的问题，答案是“不完全是”。效果是通过对颜色矩阵的操作来管理的，我承认，我没有完全掌握它，但是根据W3C规范是这样的

Grayscale

灰度

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

Saturate

饱和

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

So it would appear that different calculations are being performed for each.

所以似乎每个人都在进行不同的计算。

#1