有没有办法将背景滤镜和图层模糊一起添加？

Question

我需要这样的东西。 背景上有一个 div，它使用背景滤镜模糊来模糊背景，从而模糊图像。

但我也希望 div 也有图层模糊，这样它看起来就像逐渐消失，并且看起来不像突然结束。

现在请注意，我知道滤镜和背景滤镜不能很好地协同工作，这正是我寻找解决方案的原因。

我尝试仅使用背景滤镜来模糊背景并应用线性渐变，但这也不起作用。

这是一个链接： https://codepen.io/asaadmahmood/pen/KKObdgy

<div class="background-container">
  <div class='footer'>Footer</div>
  <div class="overlay">
  </div>
</div>

.background-container {
  position: relative;
  width: 500px;
  height: 300px;
  background-image: url('https://images.unsplash.com/photo-1709348369087-38c05ee1a7f9?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay with backdrop and layer blur */
.overlay {
  color: white;
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  backdrop-filter: blur(10px); /* Background blur */
  filter: blur(10px); /* Layer blur */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text styling */
.footer {
  color: white;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  text-align: center;
  padding-bottom: 40px;
  z-index: 5;
}

Answer 1

由于

filter

和

backdrop-filter

不能很好地堆叠，因此使用

semi-transparent

渐变叠加可以提供淡入淡出效果，而无需使用额外的

filter

属性。

例如：

.background-container {
  position: relative;
  width: 500px;
  height: 300px;
  background-image: url('https://images.unsplash.com/photo-1709348369087-38c05ee1a7f9?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay with backdrop blur and gradient fade */
.overlay {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  backdrop-filter: blur(10px); 

  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)); /* Fading gradient */
  display: flex;
  align-items: center;
  justify-content: center;
}


.footer {
  color: white;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  text-align: center;
  padding-bottom: 40px;
  z-index: 5;
}

希望这有帮助。