程序员经验分享-hwhale

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

2023-12-30

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

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

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


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

如果您要添加sepia(0.3)这将应用 30% 棕褐色滤镜。

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

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

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

=== UPDATE ===

以下是我遇到过的一些算法：

sepia

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

Source: http://www.techrepublic.com/blog/how-do-i/how-do-i-convert-images-to-grayscale-and-sepia-tone-using-c/ 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)

Source: http://www.tannerhelland.com/3643/grayscale-image-algorithm-vb6/ 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)

Source: https://stackoverflow.com/a/9177602/5814976 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)

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

Run the snippet (below) for a demo of each filter. 

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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

Math

filter

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

随机推荐

  • 如何使用 PHP 和 GD 解决字体花饰问题

    我有以下代码可以在图像上打印文本 我还在文本周围添加了一个调试框 然而 我注意到左侧的文本位于 PHP 给我的框之外imagettfbbox 这看起来像是字体花饰的问题 有什么办法可以解释这一点吗 我能算出斜盘起点和实际位置之间的距离吗im

  • 为什么在使用此 xpath 语法时会收到已弃用的警告？

    我正在使用 selenium 打印网页上的所有产品链接 这是我的代码 from selenium webdriver import Chrome driver path PATH r C Users David Desktop Seleni

  • 如何在android中使用sqlite连接表

    我试图找出如何在 Android 应用程序中使用 sqlite 数据库在我的两个表上进行简单的表连接 使用 CursorJoiner 是最简单的方法还是有更简单的方法 在实施中SQLite数据库 http android git kerne

  • Angular CLI 6 未知选项：“--singleRun”

    当我想执行测试时 我可以选择 single run已激活 但升级到 Angular 6 后不再被识别 gt ng test source map false single run no progress browsers ChromeNoS

  • PHP 无法通过 COM 打开 Excel 工作簿

    该代码工作正常 直到到达打开的工作簿行 然后失败

  • 如何创建扩展方法 (F#)？ [复制]

    这个问题在这里已经有答案了 如何在 F 中创建扩展方法 例如 如下 C 扩展 public static string Right this string host int index return host Substring host

  • 将 HTML 分成页面，分割长段落

    好吧 我什至不确定这是否可以用我当前的方法来完成 我正在尝试将 HTML 文档的内容放入当前视口大小的页面中 我目前正在通过迭代文档的所有元素并检查它们的顶部偏移量是否在当前页面的边界内来执行此操作 只要不在当前页面的边界内 此偏移量就会成

  • Typescript：是否有一种简单的方法将一种类型的对象数组转换为另一种类型

    所以 我有两节课 Item name string desc string meta string ViewItem name string desc string hidden boolean 我有一个 Item 数组需要转换为 View

  • 实体方面（春季）

    我在定义我的方面时遇到了一些问题 我有一堆实体 我想在其中分析 get methods 所以我编写了以下切入点和方法 Pointcut execution tld myproject data entities get public voi

  • 在运行时创建/修改枚举

    我正在创建一个程序 用户可以选择创建自己的自定义属性 这些属性最终将显示在PropertyGrid 现在我不想搞乱自定义编辑器 所以我只允许原始类型属性 string int double DateTime bool等 PropertyGr

  • 无闪烁文本框

    我的表单上有一个简单的 Winforms 多行文本框 每当我调整文本框的大小或移动文本框时 它的内容就会开始疯狂地闪烁 这看起来非常恶心 甚至可能导致某些用户癫痫发作 有没有办法操纵文本框的重绘过程来消除闪烁 我找到了一个工作解决方案 ht

  • 连接到 SQL Server 2008 的最大并发用户数

    连接到 SQL Server 2008 的最大并发用户数是否有限制 我猜测计算机资源决定了该限制 如果存在 但我也想知道是否存在理论上的限制 我尝试用谷歌搜索答案 但我找到的所有信息都是基于 SQL Server 的早期版本 如果有限制 它

  • 如何在 ASP.NET Core 中重写 HandleUnauthorizedRequest

    我正在将项目迁移到 asp net core 但我一直在迁移控制器的自定义授权属性 这是我的代码 public class CustomAuthorization AuthorizeAttribute public string Url g

  • 采用 {ID}-{Slug} 格式的 ASP.NET MVC 路由约束

    我有一条如下所示的路线 理想情况下我希望它匹配 domain com layout 1 slug is the name of the page routes MapRoute Layout Route name layout id slu

  • C# 7.0 中的泛型函数和 ref 返回

    是否可以使用 C 7 0 中的 ref returns 功能定义一个通用函数 该函数可以对对象的两个实例中的字段进行比较和更新 我正在想象这样的事情 void UpdateIfChanged

  • avconv：根据图像的子集制作视频

    我正在尝试使用 avconv 将一堆 png 制作成视频 png 的编号如下filename

  • 如何检测难以捉摸的 64 位可移植性问题？

    我在我为 64 位端口准备的一些 C 代码中发现了与此类似的片段 int n size t pos npos initialization while pos find ch start npos advance start positio

  • KineticJS：右键单击触发单击

    我正在使用 Kineticjs 并且定义了一个像这样的矩形事件 this rect on click tap function foo 当我左键单击时会触发该事件 右键单击时也会触发该事件 如何避免右键单击触发此事件 我无法禁用页面中的右键

  • 如何获取本机 Oracle 函数（例如 NVL、ABS 等）的列表

    我尝试使用下面的命令 但没有按我的预期工作 select OBJECT NAME OWNER from SYS ALL OBJECTS where upper OBJECT TYPE upper FUNCTION order by OWNE

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

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 假设这些是我应用于图像的滤镜 我想知道这些过滤器背后的数学原理 filter contrast 1 3 brightness 0 8

热门标签