轮播图容器加 filter 失效是因为滤镜默认不作用于后代元素渲染层，需直接给 img 标签或背景图元素设 filter，并注意层叠上下文、兼容性及硬件加速优化。
轮播图容器本身加 filter 会失效？先确认作用对象
直接给 纯 HTML/CSS 轮播（如用 Swiper 默认不会阻止 CSS 滤镜，但要注意它会给 slide 添加 立即学习“前端免费学习笔记（深入）”；filter: blur(2px) 或 grayscale(1)，常发现图片没变、背景变灰——这是因为多数轮播库（如 Swiper、Bootstrap Carousel）把图片放在子元素（filter 默认不作用于后代元素的渲染层。必须让滤镜生效在图片所在的渲染层上。
filter，而不是外层容器background-image），则需给该元素设 filter，且确保它有明确宽高和 display: block
will-change: filter 可提升动画流畅度，但仅在需要过渡/动画时添加，避免滥用用
filter 实现常见滤镜 + 过渡效果（CSS-only）input[type=radio] 或 @keyframes 控制）可直接绑定滤镜。关键点是：滤镜值必须可动画，且过渡要写在 img.carousel-slide {
filter: grayscale(0) contrast(1) brightness(1);
transition: filter 0.4s ease;
}
img.carousel-slide.active {
filter: grayscale(0.3) contrast(1.2) brightness(1.1);
}
grayscale() 范围是 0（原色）到 1（全灰），别写成百分比（如 30%）brightness(1.2) contrast(1.1) ≠ contrast(1.1) brightness(1.2)
.active 类，请确保 JS 操作的是 Swiper.js 中给每张图单独加滤镜
swiper-slide 类，并可能动态插入克隆 slide。滤镜应作用于内部 .swiper-slide。
.slide-img：.slide-img { filter: sepia(0.5) saturate(1.3); }
on:slideChange 回调配合 class 切换：swiper.slides[swiper.activeIndex].querySelector('img').classList.add('focused')
.swiper-slide 设 filter，否则可能因 transform 层叠导致滤镜被裁剪或失真滤镜在移动端 Safari 和旧版 Android WebView 的兼容性坑
filter 在 iOS 13+ 和 Android Chrome 70+ 基本可用，但仍有两个高频问题：
滤镜不是“套个 class 就完事”，真正麻烦的是层叠上下文、渲染管线介入时机、以及不同轮播实现对 DOM 结构的干预。动手前先用浏览器 DevTools 的 “Computed” 面板确认 filter + transform（如 Swiper 的 translate3d）组合渲染异常，图片可能闪烁或消失 → 解决：给 
backface-visibility: hidden
drop-shadow() 或多函数叠加 → 建议降级方案：只用 blur()、grayscale()、contrast() 这三类最稳的will-change: filter 后反而更卡 —— 真正有效的是给图片容器加 transform: translateZ(0) 强制 GPU 层filter 是否真的应用到了 overflow: hidden 或 clip-path 截断。
