应将 filter 应用于 .carousel-item 容器而非 img 标签，避免轮播切换失效、高度塌陷及嵌套叠加问题；需配合 min-height 和 will-change: filter 或 js 重置，并注意兼容性与性能。
filter 不能只加在 img 标签上
直接给 <img class="img-fluid"> 加 filter: grayscale(100%)，看似简单，但轮播图切换后灰度常失效，或图片被 object-fit: cover 截断、边缘发虚。根本原因是 img-fluid 依赖 max-width: 100% 和 height: auto，而 filter 作用于渲染后的图像像素——一旦父容器高度塌陷（比如 .carousel-item 没设 min-height），滤镜就失去作用基准。
正确做法是把 filter 移到容器层：
-
.carousel-item { filter: grayscale(100%); }—— 所有子图统一生效，且不干扰img-fluid的缩放逻辑 - 若需单图控制，仍用
img标签，但必须配合height: 100%+object-fit: cover+ 显式父容器min-height - 避免嵌套滤镜：父容器和子
img同时设grayscale()，效果非线性叠加，视觉不可控
灰度在 Bootstrap 轮播中切换失效怎么办
现象是第一张灰，切到第二张就变彩色——这不是 CSS 写错了，而是 Bootstrap 5 的轮播动画触发了元素重绘，导致部分浏览器（尤其是 Safari 和旧版 Chrome）丢弃已应用的 filter 状态。
两个轻量级修复方式：
- 给
.carousel-item加will-change: filter，提前提示浏览器该属性会变化，减少重绘抖动 - 用 JS 在
slid.bs.carousel事件后强制重置：$(this).css('filter', 'grayscale(100%)')（jQuery）或el.style.filter = 'grayscale(100%)'（原生） - 别依赖 CSS 动画过渡灰度：虽然
transition: filter 0.3s看起来平滑，但在轮播快速切换时容易卡顿或跳帧
img-fluid 和 filter 共存时的宽高陷阱
img-fluid 自身不设高度，全靠内容撑开父容器。一旦加了 filter，尤其 blur() 或 drop-shadow()，浏览器可能因渲染管线变化导致父容器高度计算异常，出现“图片显示一半”或“下方留白”。
关键约束条件：
- 轮播/封面类场景，必须给
.carousel-item或外层容器设min-height: 300px（或用aspect-ratio: 16/9） - 不要给
img单独设height，否则破坏img-fluid的等比缩放逻辑 - 如需裁剪适配，用
object-fit: cover+width: 100%; height: 100%，但前提是父容器已有明确尺寸 -
backdrop-filter不能替代filter：它是作用于背景的毛玻璃效果，对前景图片无灰度影响
兼容性与性能绕不开的三个点
IE 完全不支持 filter，移动端高值 blur() 会掉帧，这些不是“可选优化”，而是上线前必须验证的硬伤。
-
blur(4px)是性能甜点区：再小不明显，再大在中低端安卓机上明显卡顿；grayscale()和contrast()几乎无开销 - 旧浏览器降级方案只能服务端处理：CSS 中用
@supports (filter: blur(1px))包裹滤镜规则，不支持时 fallback 到预生成的灰度图 URL - 别混用
filter: blur() drop-shadow()：后者是滤镜函数，会把模糊后的整图当输入再投阴影，结果阴影也糊了；要锐利阴影，改用box-shadow
真正难的不是写对那行 filter，而是判断它该挂在哪一层、是否会被动画打断、以及用户用什么设备打开——这些没法靠一个 class 解决。
