swiper+高斯模糊

swiper+高斯模糊backdrop-filter: blur(15px)会透边、闪动
暗色模式下透边更严重

你想要问的问题是？

使用backdrop-filter属性以及blur函数来实现高斯模糊效果时，可能会遇到一些问题，例如边缘透明度和闪动现象。这些问题可能是由于浏览器的渲染引擎或硬件加速引起的，尤其是在某些情况下，如在动画或滚动过程中。

为了解决这些问题，您可以尝试以下几种方法：

1. 使用-webkit-backdrop-filter：有时，使用供应商前缀的-webkit-backdrop-filter属性可以提供更好的渲染结果。您可以将其添加到CSS样式中，例如：

.element {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

2. 减小模糊半径：减小模糊半径的数值，例如从15px减少到10px或更低，可能会减轻透边和闪动的问题。

.element {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

3. 使用will-change优化：尝试使用CSS的will-change属性来提前告诉浏览器元素将要发生变化，从而优化渲染。将will-change应用于具有高斯模糊效果的元素，例如：

.element {
  will-change: backdrop-filter;
}

4. 使用适当的背景颜色：在透明边缘出现的地方添加适当的背景颜色，这可以帮助减轻透边问题。您可以为具有高斯模糊效果的元素添加背景颜色，例如：

.element {
  backdrop-filter: blur(15px);
  background-color: rgba(0, 0, 0, 0.1);
}

这些方法可能会有所帮助，但请注意，不同浏览器和硬件组合可能会有不同的渲染结果。