使用 CSS 径向渐变添加模糊

Posted 2023-03-06

【中文标题】使用 CSS 径向渐变添加模糊

【英文标题】：Add blur with CSS radial gradient

【发布时间】：2021-08-26 13:40:42

【问题描述】：

我正在尝试使用 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 个视频元素...... )

【参考方案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

【讨论】：

至少不要添加我的答案中已经存在的最后一个。这就是有多个答案的目的

@TemaniAfif 没有阅读您的答案，因为它比我的来得晚，但是好的，我们可以将其保留在您的。只需提供有关该“mask”的一些信息即可。

我需要相反的情况，就像@TemaniAfif 的回答一样，但这个答案似乎最终不会过滤不透明度

【参考方案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>

【讨论】：

这似乎忽略了背景过滤，我相信只是在你的笔中应用了不透明度......

@user2135738 您可能正在使用 FF 进行测试，您需要使用 Chrome。 Firefox 不支持背景过滤器

我在 chrome 上。过滤器有效，但是当我添加此规则 mask: radial-gradient(circle, #0000 150px, rgba(0, 0, 0, 0.95) 160px); 然后模糊停止并应用不透明度

@user2135738 上面的 sn-p 中的代码工作正常吗？

@user2135738 使用不透明颜色，将遮罩颜色中的 0.9 替换为 1