时间戳

首页 > 解决方案 > 如何修复 Slick 滑块中的 CSS 背景滤镜模糊？

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

问题描述

我将这个 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);
}

标签： javascripthtmlcssslick.jscss-filters

解决方案

这是一个工作的codepen。

您可以使用滤镜模糊，然后它会很顺利：

filter: blur(1px);

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

推荐阅读