brightness() 对某些图标无效是因为外部 svg 作为 img 加载时浏览器可能按位图处理，导致滤镜失效；内联 svg 则正常生效，且参数为无单位数值（1 为原始亮度）。
filter: brightness() 为什么对某些图标没反应
因为 filter 作用在元素渲染后的整个图层上，如果图标是纯 SVG 内联代码且用了 fill 或 stroke 颜色，brightness() 仍会生效；但若图标是外部 <img src="icon.svg">，浏览器可能将其当作位图处理（尤其旧版 Safari），导致 filter 失效或颜色异常。
实操建议：
- 优先用内联 SVG：把 SVG 代码直接写进 HTML，确保
fill是可继承的（比如设为currentColor） - 避免对
<img>标签直接用brightness()做精细调色，兼容性差，尤其 iOS 15.4 之前 - 测试时打开开发者工具，选中图标元素，看 computed styles 里
filter是否被应用且无 warning
brightness() 的参数不是百分比而是数字系数
brightness() 接收的是无单位数值：1 是原始亮度，>1 变亮，brightness(80%) 是常见错误——这其实等价于 brightness(0.8)，但语义混淆，容易误以为 80% 是“保留 80% 亮度”，实际是“输出亮度为原图 80%”。
典型误区与对应值：
-
brightness(0)→ 全黑（不是透明） -
brightness(0.5)→ 暗一半（不是“50% 亮度”这种模糊说法） -
brightness(2)→ 亮度翻倍，可能过曝、发灰 - 慎用
brightness(1.8)以上：文字图标易丢失细节，特别是小尺寸 icon
和 color / fill 配合使用时的优先级问题
如果同时设置了 color: #666 和 filter: brightness(0.7)，filter 会作用在最终渲染颜色上，不是先调色再滤镜。也就是说，它不改变 CSS 变量或 fill 值本身，只影响像素输出。
这意味着：
- 用
currentColor做图标颜色时，brightness()会连带影响文字颜色（如果父容器有文字） - 想单独调图标亮度？得把图标包进独立容器，并设
color: inherit或显式重置 - 和
opacity混用要小心：opacity降低后，brightness()对暗部的提亮效果会被削弱
dark mode 下 brightness() 容易过暗或反向失真
在深色背景上，原本适配浅色主题的 brightness(0.8) 可能让图标几乎看不见；更麻烦的是，部分系统级深色模式（如 macOS + Safari）会对 SVG 图标自动注入 contrast/hue-rotate，和你写的 brightness() 叠加后产生不可控偏色。
稳妥做法：
- 别依赖单一
brightness()适配明暗模式，改用@media (prefers-color-scheme: dark)单独定义 fill / color - 若必须用 filter，dark mode 下改用
brightness(1.2)或搭配contrast(1.1)补细节 - 检查设计系统规范：Figma 中标注的“图标暗色版本”通常是重绘的，不是靠 CSS 滤镜生成的
真正难的不是写对那行 filter: brightness(0.9)，而是得知道它在哪种嵌套结构里失效、在哪个浏览器里被系统覆盖、以及当用户开了强制色彩滤镜时它根本不起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
