css 如何淡化背景滤镜模糊的边缘

0lvr5msh 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(243)

我想淡化一个有透明背景和backdrop-filter: blur()的元素的边缘。
通常，当使用背景过滤器时，边缘是清晰和笔直的。
所以基本上，我想减少边缘的模糊。

.blur,
.behind-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blur {
  backdrop-filter: blur(1px);
}

.behind-blur {
  width: 100px;
}

<div class="behind-blur">le le le le le le le le le le le le le le le le le le le le le le le le</div>
<div class="blur">la la la la la</div>

css

来源：https://stackoverflow.com/questions/57700730/how-to-fade-edges-of-backdrop-filter-blur

2条答案

按热度按时间

k7fdbhmy1#

将linear-gradientmask应用于内容后面的pseudo-element：

.your-box {
   position: relative;
}

.your-box::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;

   background: red;
   mask: linear-gradient(to top, transparent, black 35%);
   backdrop-filter: blur(2px);
}

蒙版就像Photoshop中的蒙版：它使用蒙版的alpha通道来隐藏蒙版所应用的内容。蒙版不透明部分下的内容将被隐藏，透明部分下的内容将可见。当然，蒙版的半透明部分将仅部分隐藏下面的内容。
如果不屏蔽元素的内容，就不能对元素本身应用屏蔽，这就是为什么我们在实际元素下面创建一个绝对定位的伪元素，设置背景并对其应用屏蔽。
这个例子适用于只需要在底部淡出的粘性标题。如果你需要它在所有侧面淡出，你将需要在蒙版中使用多个渐变，或者使用SVG蒙版。你可以在上面链接的MDN文章中阅读更多关于这些的内容。

赞(0）回复(0）举报 2023-02-06

7z5jn7bk2#

我不是100%确定你说的淡化边缘是什么意思，但是为了减少模糊，你需要减少backdrop-filter: blur(1px);-试试backdrop-filter: blur(0.5px);你可以阅读更多关于blur()here的信息。
编辑：
你应该可以使用CSS Radial Gradients来创建一个从div中心开始的渐变，并使渐变的外部边缘变得更加透明。Here is an example使用透明度。如果背景是红色的，你可以使用background-image: radial-gradient(rgba(255,0,0,1), rgba(255,0,0,0));

赞(0）回复(0）举报 2023-02-06

我来回答

css 如何淡化背景滤镜模糊的边缘

2条答案

相关问题

热门标签

最新问答