轮播图容器加 filter 失效是因为滤镜默认不作用于后代元素渲染层，需直接给 img 标签或背景图元素设 filter，并注意层叠上下文、兼容性及硬件加速优化。
轮播图容器本身加 filter 会失效？先确认作用对象
直接给 <div class="carousel"> 加 filter: blur(2px) 或 grayscale(1)，常发现图片没变、背景变灰——这是因为多数轮播库（如 Swiper、Bootstrap Carousel）把图片放在子元素（<img> 或 <picture>）里，而 filter 默认不作用于后代元素的渲染层。必须让滤镜生效在图片所在的渲染层上。
- 优先给
<img>标签加filter，而不是外层容器 - 若用 CSS 背景图（
background-image），则需给该元素设filter，且确保它有明确宽高和display: block - 使用
will-change: filter可提升动画流畅度，但仅在需要过渡/动画时添加，避免滥用
用 filter 实现常见滤镜 + 过渡效果（CSS-only）
纯 HTML/CSS 轮播（如用 input[type=radio] 或 @keyframes 控制）可直接绑定滤镜。关键点是：滤镜值必须可动画，且过渡要写在 <img> 上。
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) - 若轮播切换靠 JS 切换
.active类，请确保 JS 操作的是<img>元素，而非父容器
Swiper.js 中给每张图单独加滤镜
Swiper 默认不会阻止 CSS 滤镜，但要注意它会给 slide 添加 swiper-slide 类，并可能动态插入克隆 slide。滤镜应作用于内部 <img>，而非 .swiper-slide。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="a.jpg" alt="" class="slide-img">
</div>
</div>
</div>
- 写样式时锁定
.slide-img：.slide-img { filter: sepia(0.5) saturate(1.3); } - 若需「当前页增强、其他页弱化」，可用 Swiper 的
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+ 基本可用，但仍有两个高频问题：
立即学习“前端免费学习笔记（深入）”；
- Safari 对
filter+transform（如 Swiper 的 translate3d）组合渲染异常，图片可能闪烁或消失 → 解决：给<img>加backface-visibility: hidden - 部分 Android WebView（如微信内置 X5 内核）不支持
drop-shadow()或多函数叠加 → 建议降级方案：只用blur()、grayscale()、contrast()这三类最稳的 - 滤镜会导致硬件加速失效？不一定。实际中加
will-change: filter后反而更卡 —— 真正有效的是给图片容器加transform: translateZ(0)强制 GPU 层
filter 是否真的应用到了 <img> 元素上，再查是否被 overflow: hidden 或 clip-path 截断。 
