使用 CSS 径向渐变添加模糊

Question

我正在尝试使用 CSS 创建“焦点”效果。我设法添加了一些背景颜色并使用径向渐变来创建我想要的几乎。请参阅下面的pen（为简单起见，我在笔中使用了 img 而不是视频）：

<div class="focus" />
<video src="https://some-video" />

.focus {
    top:0;
    left:0;
    position:fixed;
    z-index:100;
    height:100vh;
    width:100vw;
    background: radial-gradient(
        circle at 50% 50%,
        transparent 150px,
        rgba(0, 0, 0, 0.9) 160px
    );
}

有没有办法添加模糊滤镜而不是不透明度？

我找到了this，但正如对该答案的评论中提到的，我想要一个允许动态内容而不复制 html 标签的解决方案（不想处理 2 个视频元素...... )

Answer 1

您可以使用backdrop-filter 和clip-path。如果你想模糊内圈，你可以达到这样的效果：

.blur {
    top:0;
    left:0;
    position:fixed;
    z-index:100;
    height:100vh;
    width:100vw;
    backdrop-filter: blur(10px);
    clip-path: circle(40%);
}

<div class="blur">
</div>

<img src="https://images.unsplash.com/photo-1598128558393-70ff21433be0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=844&q=80" />

---

background-filter CSS 属性可让您对元素后面的区域应用图形效果，例如模糊或颜色转换。因为它适用于元素后面的所有内容，所以要看到效果，您必须使元素或其背景至少部分透明。

来源：MDN Web Docs

clip-path CSS 属性创建一个剪辑区域，用于设置元素的哪一部分应该显示。

来源：MDN Web Docs

---

如果你也想应用渐变：

.gradient, .blur {
    top:0;
    left:0;
    position:fixed;
    z-index:100;
    height:100vh;
    width:100vw;
}

.blur {
    backdrop-filter: blur(10px);
    clip-path: circle(40%);
}
.gradient {
    background: radial-gradient(
        circle at 50% 50%,
        transparent 150px,
        rgba(0, 0, 0, 0.9) 160px
    );
}

<div class="blur">
</div>
<div class="gradient">
</div>

<img src="https://images.unsplash.com/photo-1598128558393-70ff21433be0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=844&q=80" />

---

请注意浏览器支持。

• backdrop-filteris not supported by IE11, FF for Android etc.
• neither clip-path is

Answer 2

您可以将背景滤镜与蒙版结合使用：

.focus {
  top: 0;
  left: 0;
  position: fixed;
  z-index: 100;
  height: 100vh;
  width: 100vw;
  -webkit-mask: radial-gradient(circle, #0000 150px, rgba(0, 0, 0, 0.9) 160px);
  backdrop-filter:blur(10px);
}

body  {
  background:url(https://images.unsplash.com/photo-1598128558393-70ff21433be0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=844&q=80) center/cover;
}

<div class="focus">

</div>