filter对bootstrap icons和内联svg无效，因其为矢量图形无色相可旋；仅对img标签加载的位图生效；推荐用currentcolor+css变量统一控制颜色。
filter对Bootstrap Icons和内联SVG完全无效
直接给 <i class="bi bi-heart"></i> 或 <svg class="bi"></svg> 加 filter: hue-rotate(90deg) 不会变色——因为它们本质是字体字符或矢量路径，不是位图。浏览器对纯黑/白矢量图形应用色相旋转时无定义域，DevTools 里取色结果是 rgb(0, 0, 0)，hue-rotate() 没有输入色相可旋转。
只对外链图片（img标签）生效
filter 真正起作用的场景仅限于 <img src="icon.svg"> 或 <img src="photo.jpg"> 这类加载为位图渲染的元素。此时可安全使用：
-
filter: brightness(1.2) saturate(1.3) hue-rotate(-15deg)暖色调增强 -
filter: invert(1) brightness(0.9)夜间模式基础反色 - 必须配合
img.no-invert { filter: invert(1); }排除不需要反色的图
全局批量改图要小心性能和叠加偏差
在 :root 或 body 上设 filter 看似省事，但会导致所有子元素（包括文字、按钮、图标）被统一滤镜处理，视觉失控风险高：
- 文字变模糊（
blur()泄漏）、链接色失真（invert()把蓝色链接变成橙色） - 多个
filter叠加顺序影响最终效果，grayscale(1) hue-rotate(180deg)≠hue-rotate(180deg) grayscale(1) - 移动端性能开销明显，尤其在滚动区域持续重绘时
真正可控的全局方案是统一用CSS变量+fill
如果你控制的是 Bootstrap Icons 的内联 SVG 版本（推荐），根本不用 filter：
- 确保 SVG 源码中所有
fill和stroke值为"currentColor" - 在
:root中定义--bs-icon-color: #4a6fa5; - 写
.icon-container { color: var(--bs-icon-color); }，图标自动继承 - 深色模式下只需在
[data-bs-theme="dark"]里重设该变量
漏掉 currentColor 或混用外链图片，才是后续所有颜色不一致的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
