CSS3滤镜的灰度和饱和度有什么区别? [英] What's the difference between CSS3 filter grayscale and saturate?

问题描述

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

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?

我的问题与这些过滤器在1-0范围内的行为有关.它们是在内部应用相同的算法，还是在某种程度上有所不同?我不是要简单地从MDN引用信息.

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.

仅将它们与我的眼睛进行比较，它们看起来就略有不同，但是我不确定.

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

推荐答案

来自 MDN

灰度

将输入图像转换为灰度. 金额"的值定义了转化的比例.值为100％完全是灰度.值为0％会使输入保持不变. 0％到100％之间的值是效果的线性乘数.如果缺少金额"参数，则使用0值.

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.

饱和

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

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-无穷大(有效).

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

是的，在功能上，介于0-1(或0％和100％)之间，两者实际上是彼此相反的，但是saturate可以超过100％并添加颜色" grayscale不能.

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.

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

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

至于已编辑的问题，答案为不完全".效果是通过操纵颜色矩阵来管理的，我承认，我不完全了解，但是根据 W3C规范 为

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

灰度

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

因此，似乎会为每个计算结果执行不同的计算.

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

这篇关于CSS3滤镜的灰度和饱和度有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！