如何将背景模糊滤镜添加为渐变答案

【问题标题】：How to add a backdrop blur filter as a gradient如何将背景模糊滤镜添加为渐变
【发布时间】：2021-09-04 08:44:06
【问题描述】：

我正在尝试使用渐变来实现背景模糊效果。我已经能够应用模糊但不能使其具有渐变。我正在使用 Tailwind，所以使用这些类的任何帮助都会很棒。

这是我正在寻找的结果（或接近它的东西），线条不刺耳。

这是一个使用纯 CSS 的示例。

.content {
  position: relative;
  width: 800px;
  height: 420px;
  display: flex;
  align-items: flex-end;
}

img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.overlay {
  width: 100%;
  -webkit-backdrop-filter: blur(20px);
  height: 200px;
  z-index: 10;
  position: relative;
}

p {
  text-align: center;
  font-size: 18px;
}

<div class="content">

  <img width="800" src="https://149351115.v2.pressablecdn.com/wp-content/uploads/2021/03/121220-Stackoverflow-Motivation-Alex-Francis-2048x1075.jpg" />

  <div class="overlay">
    <p>hello world</p>
  </div>
</div>

【问题讨论】：

像这样：stackoverflow.com/a/67906184/8620333 ?蒙版与滤镜相结合，渐变进入蒙版
你能提供一个例子吗？我试过-webkit-mask: -webkit-gradient(...)}，但我似乎无法让它工作。

标签： html css tailwind-css

【解决方案1】：

我能够通过向 div 添加掩码来解决此问题。

  -webkit-mask: -webkit-gradient(
    linear,
    left 45%,
    left 0%,
    from(rgba(0, 0, 0, 1)),
    to(rgba(0, 0, 0, 0))
  );

感谢Temani Afif 的建议。

【讨论】：