使用 CSS 径向渐变添加模糊 如果你也想应用渐变：

问题描述

我正在尝试使用 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.9) 160px
    );
}

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

我找到了 this，但正如对该答案的评论中所提到的，我想要一种解决方案，它允许在不复制 html 标签的情况下使用动态内容（不想处理 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.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>

,

您可以使用 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,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-filter is not supported by IE11,FF for Android etc.
• neither clip-path is