CSS 过滤器背后的数学原理是什么？ [关闭]

Question

假设这些是我应用于图像的过滤器。我想知道这些过滤器背后的数学原理：

filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);

我正在寻找特定于 CSS 的计算或应用于每个像素 RGB 或整体的任何通用算法。非常感谢任何帮助。

Answer 1

您传递给 CSS 过滤器函数的值是基于元素的。

如果您添加 sepia(0.3)，这将应用 30% 的棕褐色过滤器。

将输入图像转换为棕褐色。传递的参数定义了 转化的比例。 100% 的值完全是棕褐色。一个 值 0% 使输入保持不变。 0% 和 100% 之间的值是 效果的线性乘数。金额超过 100% 的值为 允许，但 UA 必须将值限制为 1。

如果您添加 contrast(1.3)，这会将图像的对比度提高 130%，依此类推。

您可以在此处阅读更多信息： https://developer.mozilla.org/en/docs/Web/CSS/filter

=== 更新 ===

这是我遇到的一些算法：

棕褐色

outputRed = (inputRed * .393) + (inputGreen *.769) + (inputBlue * .189)
outputGreen = (inputRed * .349) + (inputGreen *.686) + (inputBlue * .168)
outputBlue = (inputRed * .272) + (inputGreen *.534) + (inputBlue * .131)

来源：http://www.techrepublic.com/blog/how-do-i/how-do-i-convert-images-to-grayscale-and-sepia-tone-using-c/

灰度

Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)

来源：http://www.tannerhelland.com/3643/grayscale-image-algorithm-vb6/

色相和饱和度

color = blend2(rgb(128, 128, 128), hueRGB, saturation);

if (lightness <= -1)
    return black;
else if (lightness >= 1)
    return white;

else if (lightness >= 0)
    return blend3(black, color, white, 2 * (1 - lightness) * (value - 1) + 1)
else
    return blend3(black, color, white, 2 * (1 + lightness) * (value) - 1)

来源：https://stackoverflow.com/a/9177602/5814976

亮度

colour = GetPixelColour(x, y)
newRed   = Truncate(Red(colour)   + brightness)
newGreen = Truncate(Green(colour) + brightness)
newBlue  = Truncate(Blue(colour)  + brightness)
PutPixelColour(x, y) = RGB(newRed, newGreen, newBlue)

来源：http://www.dfstudios.co.uk/articles/programming/image-programming-algorithms/image-processing-algorithms-part-4-brightness-adjustment/

_{运行 sn-p（如下）以查看每个过滤器的演示。}

body { font-family: 'fira code'; }
img {
  width: 40px;
  height: 40%;
  transition: all 500ms;}
img:hover { transform: scale(4); }
td { padding: 0 20px; }
th:nth-child(1) { text-align: right; }
sup { color: red; }

<table>
  <tr>
    <th><u>Filter:</u></th>
    <th>0%</th>
    <th>25%</th>
    <th>50%</th>
    <th>75%</th>
    <th>100%</th>
  </tr>
  <tr>
    <th>brightness</th>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:brightness(0%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:brightness(25%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:brightness(50%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:brightness(75%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:brightness(100%);'></td>
  </tr>
  <tr>
    <th>contrast</th>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:contrast(0%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:contrast(25%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:contrast(50%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:contrast(75%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:contrast(100%);'></td>
  </tr>
  <tr>
    <th>grayscale</th>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:grayscale(0%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:grayscale(25%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:grayscale(50%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:grayscale(75%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:grayscale(100%);'></td>
  </tr>
  <tr>
    <th>invert</th>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:invert(0%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:invert(25%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:invert(50%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:invert(75%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:invert(100%);'></td>
  </tr>
  <tr>
    <th>opacity</th>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:opacity(0%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:opacity(25%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:opacity(50%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:opacity(75%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:opacity(100%);'></td>
  </tr>
  <tr>
    <th>saturate</th>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:saturate(0%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:saturate(25%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:saturate(50%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:saturate(75%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:saturate(100%);'></td>
  </tr>
  <tr>
    <th>sepia</th>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:sepia(0%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:sepia(25%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:sepia(50%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:sepia(75%);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:sepia(100%);'></td>
  </tr>
  <tr>
    <th>blur<sup>*</sup></th>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:blur(0px);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:blur(4px);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:blur(8px);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:blur(12px);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:blur(16px);'></td>
  </tr>

  <tr>
    <th>drop-shadow<sup>*</sup></th>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:drop-shadow(0px 0px 0px black);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:drop-shadow(3px 3px 1.5px black);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:drop-shadow(6px 6px 3px black);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:drop-shadow(9px 9px 4.5px black);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:drop-shadow(12px 12px 6px black);'></td>
  </tr>

  <tr>
    <th>hue-rotate<sup>*</sup></th>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:hue-rotate(0deg);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:hue-rotate(90deg);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:hue-rotate(180deg);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:hue-rotate(270deg);'></td>
    <td><img src='https://i.stack.imgur.com/QFQsM.png' style='filter:hue-rotate(360deg);'></td>
  </tr>
</table>

<div style='font-size:12px; text-align:right;'>(<sup>*</sup> = does <b>not</b> take % values)</div>