真正稳定的做法是把滤镜作用在容器上而非图片本身，因img自身无法保证高度基准，轮播切换易失效，且filter多函数须按从左到右顺序执行，backdrop-filter需背后有内容、自身半透明、无遮挡层。
直接给 <img> 标签加 filter 很容易出问题——轮播切换后失效、边缘模糊、响应式塌陷、甚至被 object-fit 截断。真正稳定的做法是把滤镜作用在容器上，而不是图片本身。
为什么别只写在 <img> 上
Bootstrap 的 img-fluid 依赖 max-width: 100% 和 height: auto，父容器高度常塌陷；而 filter 是对渲染后像素操作，高度没撑开，滤镜就“没地方生效”。轮播图中更明显：第一张灰度正常，切到第二张变回彩色，不是 CSS 写错了，是浏览器对 transform 动画中的 filter 重绘不及时。
- 现象：图片只显示上半截、下方大片留白，或
blur(2px)后边缘发虚溢出 - 根本原因：滤镜需要稳定的高度基准，
<img>自身无法保证 - 正确对象：用
.carousel-item、.card-img-overlay或自定义 wrapper<div>承载filter
filter 多函数叠加的顺序和写法
多个滤镜必须用空格分隔，且执行顺序从左到右，结果不可逆。比如 grayscale(1) sepia(0.5) 是先转灰再加棕褐调，反过来则棕褐被灰度覆盖，视觉差异极大。
-
filter: brightness(0.8) contrast(1.3) saturate(0.7)—— 亮度降低 → 对比增强 → 饱和度减弱 -
filter: blur(3px) drop-shadow(0 2px 4px rgba(0,0,0,0.2))—— 注意：阴影也会被模糊！要锐利阴影，换用box-shadow - 避免混用
blur()和drop-shadow()实现“毛玻璃”感；真要毛玻璃，该用backdrop-filter+ 半透明背景
在 Bootstrap 轮播中让灰度持续生效
仅靠 CSS 无法 100% 保证所有浏览器在 slid.bs.carousel 后维持 filter 状态，尤其 Safari 和旧版 Chrome。
立即学习“前端免费学习笔记（深入）”；
- 轻量修复：给
.carousel-item加will-change: filter，提示浏览器提前准备重绘 - 确定性修复：监听
slid.bs.carousel事件，用 JS 强制重设（原生写法）：el.style.filter = 'grayscale(1)' - 禁用
transition: filter—— 轮播快速切换时，CSS 过渡容易卡顿或跳帧
backdrop-filter 实现毛玻璃效果的关键条件
这不是图片滤镜，但常被误当作替代方案。它只模糊“背后内容”，和 filter 作用对象完全不同，也极易因结构问题失效。
- 必须有「可被模糊的背景」：外层需设真实背景（如
background: linear-gradient(...)），不能只靠 body 默认白色 - 容器自身必须半透明：用
background-color: rgba(255,255,255,0.15)，不能是transparent或bg-white - Safari 必须加前缀：
-webkit-backdrop-filter: blur(10px) - 避开
overflow: hidden：Bootstrap.modal默认带这个，会裁掉模糊溢出，边缘变硬
最易被忽略的一点：滤镜函数顺序不是“怎么写都行”，而是像素级流水线；blur 值超过 6px 在中低端安卓上就开始掉帧；而 backdrop-filter 的生效前提——背后有内容、自身半透明、无遮挡层——三条缺一不可，少一条就全黑。
