如何在 css 中创建焦点模糊效果？

Question

我正在尝试用模糊创建焦点效果，但我遇到了一个大问题。 :)

我需要这样的东西：

但是互联网上的所有例子都是关于固定位置的块。如果元素的位置是绝对的，则 Clip-path 和 radial-gradient 不起作用。我的块有 700 像素的高度，我可以滚动它。

我达到的唯一效果：

但我想看到模糊的文字。

可能吗？

这是我尝试过的（简短版）：

<div class="black-promo">
  <div class="black-promo__blur"></div>
</div>

.black-promo {
  background: black;
  position: relative;
  height: 700px;


  &__blur {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: radial-gradient(circle, #0000 150px, rgba(45, 45, 45, 0.9) 300px);
  }
}

尝试数字 2：

https://codepen.io/Nnekkka/pen/xxagZQQ

Answer 1

通常你想要做的是在叠加层元素上切出一个洞，然后在叠加层上应用

backdrop-filter

属性，以模糊它下面的内容。这是一个使用

mask

属性切出一个洞的示例。请注意，Chrome 需要一个供应商前缀 (

-webkit-

)。

https://codepen.io/andrewray/pen/JjaEGOa

.div-with-hole {
  position:absolute;
  top:0;
  height: 100vh;
  -webkit-mask: radial-gradient(50px, #0000 98%, #000);
          mask: radial-gradient(50px, #0000 98%, #000);
  width: 100%;
  backdrop-filter: blur(10px);
  background:rgba(255, 0, 0, 0.1);
}

Answer 2

使用这个 CSS： 背景滤镜：模糊（3px）；