我该如何使用CSS3滤镜模拟伽马校正？

Question

根据这个页面http://www.w3schools.com/cssref/css3_pr_filter.asp，其中包括对比度、亮度、色调、饱和度等内容。但是没有明确提到伽马值。是否可以使用现有的CSS3图像滤镜来模拟它，或者是否存在插件（JQuery或其他JS）可以实现它？

- Konstantin

Answer 1

您可以使用SVG滤镜。

#filtered {
  filter: url('#gamma');
}

<img src="https://picsum.photos/seed/picsum/300/200">
<img id="filtered" src="https://picsum.photos/seed/picsum/300/200">

<svg height="0">
  <filter id="gamma">
    <feComponentTransfer>
       <feFuncR type="gamma" exponent="1.5" amplitude="2.5" offset="0" />
       <feFuncG type="gamma" exponent="1.5" amplitude="2.5" offset="0" />
       <feFuncB type="gamma" exponent="1.5" amplitude="2.5" offset="0" />
    </feComponentTransfer>
   </filter>
</svg>

- Yukulélé

Answer 2

伽马值与对比度的关系更为密切。虽然没有专门的过滤器，但您可以通过微调亮度并主要处理对比度来获得几乎相同的效果。

例如，如果我想提高看起来太暗的图像的伽马值，我可能会尝试：

filter: contrast(125%) brightness(105%);

记住，使用亮度主要是为了照亮图像中的黑暗部分，如果您希望紧密模拟伽马，则对比度应该承担大部分工作。

随意查看有关伽马 vs 亮度的主题： https://graphicdesign.stackexchange.com/questions/11445/gamma-vs-brightness-any-difference

希望这有所帮助。干杯。

- jensenmk89

---

伽马与对比度无关。伽马用于解决CRT显示器的非线性问题。现在我们需要处理它，因为所有的标准都已经被打破了。 - user877329