为什么模糊背景过滤器不能与蒙版图像一起使用？答案

【问题标题】：Why doesn't blur backdrop-filter work together with mask-image?为什么模糊背景过滤器不能与蒙版图像一起使用？
【发布时间】：2022-11-09 23:41:22
【问题描述】：

我有一个带有mask-image 集的容器div 和两个带有backdrop-filter 集的子div：

<div class="scroll-view">
  <div class="inner"></div>
  <div class="inner"></div>
</div>

body {
  background-image: url("https://images.unsplash.com/photo-1653744971341-ae4a77618399?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTYzODM1OTM&ixlib=rb-1.2.1&q=80");
}

.scroll-view {
  width: 300px;
  height: 450px;
  border: 1px solid red;
  -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
  overflow-y: scroll;
}
.inner {
  backdrop-filter: blur(10px);
  width: 200px;
  height: 200px;
  margin: 50px;
  border: 1px solid green;
  background: rgba(255, 255, 255, 0.2);
}

在滚动孩子时，我希望它们会在容器的顶部和底部边缘淡出。此外，儿童区域下的背景应该是模糊的。

但是当设置mask-image 时，不会应用模糊滤镜。只有当我注释掉mask-image 时它才有效，为什么？

这是 codepen sn-p：https://codepen.io/perqin/pen/rNdNBmy。

【问题讨论】：

标签： html css

【解决方案1】：

如果父母被屏蔽，背景过滤器似乎不起作用。下面是基于您的演示的解决方法。在<body> 和<div class="inner"> 上应用相同的固定背景图像

body {
  background-image: url("https://images.unsplash.com/photo-1653744971341-ae4a77618399?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTYzODM1OTM&ixlib=rb-1.2.1&q=80");
  background-attachment: fixed; /* make sure background is fixed */
}

.scroll-view {
  width: 300px;
  height: 450px;
  border: 1px solid red;
  -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
  overflow-y: scroll;
}
.inner {
  /*   backdrop-filter: blur(10px); disable backdrop filter */
  width: 200px;
  height: 200px;
  margin: 50px;
  border: 1px solid green;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.blur {
  /* new blur element inside .inner to create a fake backdrop blur effect */
  width: 200%;
  height: 200%;
  position: relative;
  top: -50%;
  left: -50%;
  filter: blur(20px); /* set blur level */
  background-image: url("https://images.unsplash.com/photo-1653744971341-ae4a77618399?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTYzODM1OTM&ixlib=rb-1.2.1&q=80"); /* apply same image as background */
  background-attachment: fixed; /* make sure background is fixed */
}

<div class="scroll-view">
    <div class="inner">
      <div class="blur"></div>
    </div>
    <div class="inner">
      <div class="blur"></div>
    </div>
</div>

【讨论】：