brightness()是最直接有效的亮度调节方案，但需用无单位数字或百分比（如1.2或120%），避免语法错误、前缀缺失及误用局部生效；移动端注意小数精度，旧版浏览器需-webkit前缀；局部调整须配合mask-image或canvas实现。
filter: brightness() 是最直接有效的方案，但值写错、没兜底前缀、或误以为它能“局部生效”，就会白配。
brightness() 的值怎么写才不被浏览器忽略
必须用无单位数字（如1.2）或百分比（如120%），两者等价；1 或 100% 表示原始亮度，0 或 0% 是纯黑。
-
brightness(0.8)和brightness(80%)效果一致，图片变暗 - 别写
brightness(120)（漏了%）或brightness(1.2px)（加了单位），整条filter声明会被浏览器静默丢弃 - 移动端 Safari 对小数精度敏感：
brightness(1.0001)可能被截成1，建议保留 1 位小数足够，比如1.3而非1.333
加了 filter 却没变化？先查这三处
不是语法错，而是渲染链路上卡住了。
- 父容器设了
overflow: hidden，而brightness(1.3)后边缘泛白/溢出，实际被裁掉了 - 样式加在了父
div上，但filter不穿透子元素——必须直接作用于<img>标签本身 - 旧版 iOS（9–12）和部分 Android Webview 需要
-webkit-filter前缀，只写标准版会失效；Firefox 支持稳定，但若图片是background-image，filter不起作用，得换background-blend-mode或伪元素遮罩
想只调图片某一块的亮度？别硬套 brightness()
filter: brightness() 天然不支持局部，强行用只会浪费时间。
- 视觉上“像局部亮”：用
mask-image+ 全局brightness()。遮罩图必须是灰度图（白=显示，黑=隐藏），且显式声明mask-type: luminance（默认是alpha，容易踩坑） - 真要精确控制某区域像素：只能上 Canvas。调
ctx.getImageData(x, y, w, h)读数据，对每个data[i]（R）、data[i+1]（G）、data[i+2]（B）乘系数k，再用Math.min(255, Math.max(0, ))截断；data[i+3]（Alpha）必须原样保留，否则透明部分会发灰 - 别用
clip-path配合brightness()——clip-path只裁显示区域，filter仍作用于原始整图尺寸
真正难的不是写对那一行 filter，而是分清你要的是“看起来亮一点”，还是“必须让第 120 行第 87 列的像素 R 值刚好是 233”。前者靠 CSS 遮罩凑，后者绕不开循环、截断、Alpha 保真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
