要让虚化背景始终匹配当前轮播图，需在每次切换时同步更新 .bg 的 backgroundImage 和 background-size；注意 blur() 的性能与层级问题，加 will-change: filter 并确保同级 z-index；背景更新须与 transform 位移操作原子性执行，避免割裂或滞后。
直接用 filter: blur() + 绝对定位背景图就能实现，但关键不是“怎么加模糊”，而是“怎么让虚化背景始终匹配当前轮播图”——否则第一张图虚化了，切到第二张时背景还是第一张，观感就断了。
虚化背景必须随轮播图同步切换
很多人把 .bg 的 background-image 写死成一张图，结果只虚化了首图。正确做法是：每次切换图片时，同步更新 .bg 的 style.backgroundImage，指向当前图片的 URL。
- 轮播容器里每张
<img>都得带data-src（或直接读src），方便 JS 提取路径 - 切换逻辑里，除了移动
.tupian的transform，还要执行：document.querySelector('.bg').style.backgroundImage = `url(${currentImg.src})` - 别忘了同时重设
background-size: 100% 100%，否则新图尺寸不同会导致拉伸或留白
filter: blur(30px) 的坑：移动端性能与层级冲突
在 iOS Safari 或低端安卓机上，大面积 blur() 可能触发渲染降级，甚至卡顿。更隐蔽的问题是：如果轮播图用了 transform: translateZ(0) 强制硬件加速，而虚化背景没加，两者可能因层叠上下文错乱，导致背景“透”出轮播图内容。
- 给
.bg加will-change: filter，提前提示浏览器该属性会变 - 确保
.bg和轮播图容器同级，且z-index明确（比如.bg { z-index: -1 }） - 测试时用真机打开，
blur(20px)比blur(30px)更稳妥；若必须高斯强度，可考虑用 Canvas 预生成模糊图再替换background-image
自动轮播时背景切换的时机必须精准
如果用 setInterval 切图，背景更新不能放在动画开始前——否则用户看到的是“先换背景、再滑动图片”，有割裂感；也不能放动画结束后——因为 transitionend 在快速连点时可能丢失事件，导致背景滞后。
立即学习“前端免费学习笔记（深入）”；
- 最佳时机是：在
transform更新后、transition触发前，立刻更新背景 - 也就是和位移操作写在同一函数里，例如：
el.style.transform = `translateX(-${currentIndex * width}px)`; bgEl.style.backgroundImage = `url(${imgs[currentIndex].src})` - 如果用了 CSS
@keyframes动画而非transition，就得用animationstart事件来同步背景，否则动画帧和背景不同步
最易被忽略的一点：当用户手动点击小圆点或箭头时，currentIndex 和背景图必须原子性更新——漏掉任何一个，下一次自动轮播就会拿错图源。状态不同步比样式难看更致命。
