什么是css中的"线性乘法器"，原来如此简单

在 CSS 中，filter 属性用于对元素应用图形效果，比如模糊、亮度调整、对比度调整等。其中 brightness(amount) 是一个非常常见的滤镜函数，它用来调整图像的亮度。

一、什么是“线性乘法器”？

在 brightness(amount)中一般使用的都是百分比，比如 brightness(50%)。

但是有时候会直接填数字，这里用到的就是线性乘法器。

“线性乘法器” 指的是：

将图像中每个像素的颜色值（通常是 RGB 值）按比例进行放大或缩小，这个比例就是所谓的“乘法器”。

• 如果 amount = 100%，表示不改变亮度，即乘以 1.0
• 如果 amount = 50%，表示亮度减半，即乘以 0.5
• 如果 amount = 200%，表示亮度翻倍，即乘以 2.0

所以这里的 amount 实际上被转换为一个线性的数值因子来作用于像素颜色值。

二、举个🌰

假设某个像素的颜色是：

RGB(100, 150, 200)

我们分别使用不同的 brightness() 值来处理它：

brightness(amount)	乘数（factor）	处理后颜色值 RGB
brightness(50%)	×0.5	(50, 75, 100)
brightness(100%)	×1.0	(100, 150, 200)
brightness(200%)	×2.0	(200, 255*, 255*)

注：超过 255 的颜色值会被截断为 255（最大值）

三、为什么叫“线性”？

“线性”是指这种变换是成比例的，不会引入非线性变化（比如指数增长、对数压缩等）。无论原始亮度是多少，增加的亮度幅度都是统一的比例。

例如：

• 从 100 → 200 是翻倍
• 从 200 → 400（截断为 255）也是翻倍

这和“对比度”不同，对比度会拉伸或压缩颜色之间的差异，而不是简单地整体增亮或减暗。

四、总结

✅ 所以，“线性乘法器”在 brightness(amount) 中的意思是：

将图像中每个像素的颜色值乘以一个固定的数值（由百分比转换而来），从而达到增亮或变暗的效果。

这个过程是线性的（成比例）、直接的、没有复杂算法的。