brightness()值须用无单位数字（如1.2）或百分比（如120%），1或100%为原始亮度，0或0%为全黑，小于1变暗，大于1变亮；漏写%、误加单位或精度超限均导致失效。
直接用 filter: brightness() 就能调，但值写错、没加前缀、或期望它“局部生效”，就会失效。
brightness() 的值怎么写才有效
必须用无单位数字（如 1.2）或百分比（如 120%），两者等价；1 或 100% 是原始亮度，0 是纯黑，超过 1 才变亮，小于 1 才变暗。
-
brightness(0.8)和brightness(80%)效果一致，图片变暗 -
brightness(1)不等于 “不生效”——它明确重置为原始亮度，会覆盖父级或其他 filter - 别写
brightness(120)（漏了 %）或brightness(1.2px)（加了单位），浏览器直接忽略整条 filter 声明 - 移动端 Safari 对小数精度敏感，
brightness(1.0001)可能被截断成1，建议保留 1 位小数足够
为什么加了 brightness 却没变化
常见原因不是语法错，而是渲染层被遮挡、CSS 优先级冲突，或浏览器兼容性没兜底。
- 检查是否被
opacity、transform或父容器的overflow: hidden切掉渲染区域 - 确保样式确实应用到
<img>元素本身，而不是其父容器（filter作用于整个元素盒，不穿透子元素） - Chrome/Safari/Edge 支持标准
filter，但旧版 Android Webview 和 iOS 9–12 需要-webkit-filter前缀，只写一个会挂掉 - Firefox 对
filter在<img>上的支持稳定，但若图片是 background-image，则必须用background-blend-mode或伪元素遮罩替代
想只调图片某一块的亮度怎么办
filter: brightness() 天然不支持局部，强行“模拟”有两种现实路径，选错会白忙活。
- 用
mask-image+filter：先画一个灰度遮罩图（白色=提亮区），再给整图加brightness()，靠遮罩控制可见区域。注意必须设mask-type: luminance，且 Firefox 对mask-image支持弱，得加-webkit-mask-image - 真局部？只能上 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, ...))截断，最后putImageData()写回。别忘了 alpha 通道保持原值，否则透明部分会发灰 - 别试图用
clip-path配合filter——clip 只裁显示区域，filter 仍作用于整个原始图像尺寸
真正难的不是写对那行 filter: brightness(1.3)，而是想清楚：你要的是“视觉上像局部亮”，还是“必须精确控制某几个像素的亮度值”。前者用 mask-image 能凑合，后者绕不开 getImageData 的循环和截断逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
