如何使用 CSS3 过滤器模拟伽玛校正

How can I emulate gamma correction with CSS3 filters?

本文关键字：模拟 何使用 CSS3 过滤器      更新时间：2023-09-26

根据此页面 http://www.w3schools.com/cssref/css3_pr_filter.asp有对比度、亮度、色调、饱和度等。但没有明确访问伽马。有没有办法用现有的CSS3图像过滤器来模拟它，或者是否存在一个插件（JQuery或其他JS）来实现它？

伽

玛与对比度的关系比任何东西都更密切。虽然没有明确的滤镜，但您可以通过对亮度进行小幅调整并主要使用对比度来获得几乎相同的结果。

例如，如果我想在看起来太暗的图像上提高伽玛值，我可以尝试：

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

请记住，要主要使用亮度来照亮图像中的黑暗，在您想要密切模拟伽玛的情况下，对比度应该完成大部分工作。

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

希望有帮助。干杯。

您可以使用 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>

相关文章：