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

Question

我正在将此CSS用于Slick滑块中的幻灯片：

backdrop-filter: blur(10px)

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

我该如何解决？

CodePen：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);

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