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

Question

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

backdrop-filter: blur(10px)

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

我怎样才能解决这个问题？

代码笔：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);
}

Answer 1

这是一个有效的codepen。

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

filter: blur(1px);

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