如何使用 feFuncR、feFuncB、feFuncG 将 CSS 中的亮度（使用过滤器）从 -100% 映射到 100%答案

【问题标题】：How to Map brightness in CSS( using filter ) from -100% to 100% using feFuncR, feFuncB, feFuncG如何使用 feFuncR、feFuncB、feFuncG 将 CSS 中的亮度（使用过滤器）从 -100% 映射到 100%
【发布时间】：2022-11-02 21:43:25
【问题描述】：

我应该在feComponentTransfer 内设置feFuncR、feFuncG 和feFuncB 的斜率值以将图像的亮度从-100%（全黑）映射到100%（全白），0% 有没有效果。

我尝试过使用filter="brightness(x)"，它对值（0-1 或 0% 到 100% 即它从黑色图像变为正常图像）按预期工作，但是在增加亮度的同时，我希望图像完全转动白色的。即使在对某些图像使用高达 10000000% 的值后，它也不会发生。

【问题讨论】：

标签： javascript html css frontend svg-filters

【解决方案1】：

输入已经是灰度还是输入是彩色图像？ “映射亮度”是什么意思 - 你想将每种输入颜色映射到两种输出颜色：rgb(0,0,0) 和 rgb(255,255,255) 还是你想改变黑点和白点图片？（FWIW - CSS 亮度过滤器是一个乘数，因此如果任何颜色分量为零（例如 rgb(0,34,128)） - 它永远不会变成白色。）

假设您有一个颜色输入并且您想要一个黑白分色的 - 这就是您将使用的过滤器。

<filter id="posterize" color-interpolation-filters="sRGB">
  <feColorMatrix type="saturate" values="0"/>
  <feComponentTransfer>
     <feFuncR type="discrete" tableValues="0 1"/>
     <feFuncG type="discrete" tableValues="0 1"/>
     <feFuncB type="discrete" tableValues="0 1"/>
 </feComponentTransfer>
</filter>

如果您想为每个颜色通道添加/减去等量的亮度，那么使用 feColorMatrix 并将第五列从 -1 调整为 1 会更容易。以下将为您提供黑色。将 -1 更改为 1，您将得到全白。

<filter id="additive-brightness" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="1 0 0 0 -1 
                                       0 1 0 0 -1 
                                       0 0 1 0 -1
                                       0 0 0 1 0"/>
</filter>

【讨论】：

感谢您的回答，我想创建一个滑块，使用它可以控制图像的亮度，滑块的范围从 -100 到 100。应用 -100% 应该使图像完全变黑，0 应该没有效果，100应该使图像完全变白。因此，我想知道我应该如何使用 filter 属性来实现相同的效果。