为何backdrop-filter: blur()实现图片模糊遮罩无法生效？

你的backdrop-filter: blur()不生效的核心问题有两个：

1. 定位上下文错误
   你给.name设置了position: absolute，但它的父元素body.profile没有设置position: relative，这会导致.name的绝对定位是基于视口而非body。所以你的.name实际上是在视口底部，根本没有覆盖在body的背景图上，自然看不到模糊效果。

2. opacity属性的干扰
   你给.name设置了opacity: 60%，这会让整个元素（包括backdrop-filter生成的模糊效果）都变透明，虽然不是导致不生效的直接原因，但用rgba颜色值控制背景透明度会更合理，不会影响模糊效果的表现。

修正后的代码 #

CSS #

.profile {
  background-image: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
  width: 250px;
  height: 250px;
  background-size: cover;
  background-position: 0px;
  position: relative; /* 添加这行，为子元素提供定位上下文 */
}

.name {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.6); /* 用rgba代替opacity，控制背景透明度 */
  color: white;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 100%;
  backdrop-filter: blur(10px); /* 现在会生效了 */
}

HTML #

<body class="profile">
    <div class="name">Dog</div>
</body>

修改后，.name会正确定位在body的底部，覆盖在背景图上，backdrop-filter就能对后方的图片区域产生模糊效果，同时背景的半透明效果也能正常显示。

内容的提问来源于stack exchange，提问作者HeyLameRobin