使用 CSS 径向渐变添加模糊

Question

我正在尝试使用 CSS 创建“焦点”效果。我设法添加了一些背景颜色并使用径向渐变来创建 almost 我想要的。请参阅下面的 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 and 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" />

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

Source: MDN Web Docs

The clip-path CSS property creates a clipping region that sets what part of an element should be shown.

Source: 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-filter is 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>

使用 CSS 径向渐变添加模糊

Add blur with CSS radial gradient

css

css-filters

css-gradients

如果你也想应用渐变：