如何为带backdrop-filter的底部固定div添加顶部渐变模糊过渡效果

核心逻辑是让固定定位元素的模糊、背景透明度从底部到顶部逐步降低为0，消弭生硬的分割边界，以下是两种可直接落地的实现方案： #

方案1：纯CSS无额外DOM元素（兼容性优） #

仅需要修改#sum的原有样式即可，利用CSS遮罩（mask）属性让元素的可见度、模糊效果同步渐变：

#sum {
  /* 原有属性全部保留，仅修改/新增以下属性 */
  /* 移除原有的固定background-color和box-shadow */
  background: linear-gradient(to top, #0008 70%, transparent 100%);
  backdrop-filter: blur(10px);
  /* 遮罩渐变，和背景渐变匹配，70%位置以下完全可见，往上逐步透明 */
  mask-image: linear-gradient(to top, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 70%, transparent 100%);
}

可以自行调整渐变的百分比（比如改成60%/80%）、渐变终止位置，控制过渡区域的高度。 #

方案2：新增过渡层实现更丝滑效果 #

如果需要更长的过渡区域、或者需要兼容更老旧的浏览器，可以新增一个过渡层放在#sum顶部：

1. 新增DOM元素，放在#sum之前：

<div id="sum-transition"></div>
<div id='sum'>
  <!-- 原有内容不变 -->
</div>

2. 新增对应CSS样式，同时调整原有#sum样式：

/* 新增过渡层样式 */
#sum-transition {
  position: fixed;
  left: 50%;
  bottom: 50%; /* 和#sum的高度保持一致，刚好对齐#sum的顶部 */
  transform: translateX(-50%);
  width: 70%;
  height: 60px; /* 可自行调整过渡区域的高度 */
  padding: 0 15%;
  backdrop-filter: blur(3px); /* 模糊值低于#sum的10px，形成梯度 */
  background: linear-gradient(to top, #0006, transparent);
  pointer-events: none; /* 不阻挡下方表格的滚动、点击事件 */
}

/* 修改原有#sum的属性，移除box-shadow，调整背景 */
#sum {
  /* 原有其他属性全部保留 */
  background-color: #0008;
  box-shadow: none;
}

两种方案都可以完全消除清晰和模糊区域的生硬边界，滚动表格时内容会逐步从清晰过渡到模糊，符合需求。

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