如何修复 Slick 滑块中的 CSS 背景滤镜模糊？

【问题标题】：How fix CSS backdrop-filter blur in Slick slider?如何修复 Slick 滑块中的 CSS 背景滤镜模糊？
【发布时间】：2020-12-11 15:37:58
【问题描述】：

我将这个 CSS 用于 Slick 滑块中的幻灯片：

backdrop-filter: blur(10px)

但是，当我单击以显示下一张幻灯片时，CSS 模糊消失了一秒钟，然后幻灯片再次模糊。用鼠标拖动幻灯片时，CSS 模糊在 mouseup 时消失。

我该如何解决这个问题？

代码笔：https://codepen.io/maxbeat/pen/abNBrex

.slider__item {
  height: 200px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 24px arial;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
}

【问题讨论】：

标签： javascript html css slick.js css-filters

【解决方案1】：

这是一个有效的codepen。

你可以使用滤镜模糊，然后就很流畅了：

filter: blur(1px);

另外，您需要在幻灯片“阴影”层和幻灯片“内容”层之间进行拆分，因为您希望内容清晰，只有框背景模糊。

【讨论】：

这确实在幻灯片更改期间保持模糊，但它也会模糊幻灯片的内容。
是可以修复的，他只需要拆分图层。带有模糊的滑块项应该是 zIndex 0（仅用于示例），然后内容应该在它之上 - zIndex 1。
另外，还要查看浏览器支持，backdrop vs filter
我需要在幻灯片后面模糊，css过滤器只模糊幻灯片内容，这样不能解决我的问题
您可以对幻灯片进行模糊处理，并将有内容的图层放置在滑块上方，这样内容就不会模糊了。