0

我正在尝试使用 CSS 创建“焦点”效果。我设法添加了一些背景颜色并使用径向渐变来创建几乎我想要的东西。请参阅下面的笔（在笔中，为了简单起见，我使用了 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
    );
}

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

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

4

2 回答 2

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>

于 2021-06-09T14:27:14.957 回答
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 网络文档

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

来源：MDN 网络文档

如果您也想应用渐变：

.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" />

请注意浏览器支持。

于 2021-06-09T14:26:23.980 回答