如何用CSS为div添加指定位置的渐变透明模糊效果？

完整实现代码 #

HTML结构 #

<!-- 固定背景图容器 -->
<div class="background-image"></div>
<!-- 模糊遮罩容器 -->
<div class="blurred-mask-container"></div>

<!-- 页面内容区 -->
<div class="content">
  <!-- 这里填充你的页面内容，比如剧集列表、介绍等 -->
  <div class="content-item">示例内容</div>
  <div class="content-item">示例内容</div>
  <!-- 重复足够多的内容以触发滚动 -->
</div>

CSS样式 #

/* 全局重置，避免默认边距影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 固定背景图，确保滚动时背景不动 */
.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('你的背景图URL') center/cover no-repeat;
  z-index: -2; /* 放在模糊容器下方 */
}

/* 模糊遮罩容器 */
.blurred-mask-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(20px); /* 调整模糊程度，Apple TV+的模糊更柔和，20px左右合适 */
  z-index: -1;
  /* 初始遮罩：从底部到800px位置渐变，上方透明（显示清晰背景），下方不透明（显示模糊） */
  mask: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 800px);
  -webkit-mask: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 800px);
}

/* 内容区样式，确保内容在最上层，且有足够高度触发滚动 */
.content {
  position: relative;
  z-index: 1;
  padding: 20px;
  color: white;
}

.content-item {
  height: 200px;
  margin-bottom: 20px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 10px;
}

JavaScript逻辑 #

const blurMask = document.querySelector('.blurred-mask-container');
const triggerScrollHeight = 800; // 与初始遮罩的800px对应

window.addEventListener('scroll', () => {
  const currentScrollY = window.scrollY;
  // 计算遮罩的透明起始位置：滚动越多，起始位置越往上，直到到达顶部
  const maskTransparentStart = Math.max(0, triggerScrollHeight - currentScrollY);
  
  // 更新遮罩样式
  blurMask.style.mask = `linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) ${maskTransparentStart}px)`;
  blurMask.style.webkitMask = `linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) ${maskTransparentStart}px)`;
});

实现原理说明 #

1. 固定背景与模糊容器层级：背景图设为fixed确保滚动时位置不变，模糊容器同样设为fixed，通过z-index控制层级，保证模糊容器在背景图之上、内容之下。
2. CSS Mask实现渐变显示：利用mask（含-webkit前缀兼容）属性给模糊容器添加渐变遮罩，初始状态下，容器顶部800px范围内是透明的（让下方清晰背景透出），下方完全不透明（显示模糊效果）。
3. 滚动监听动态调整遮罩：监听页面滚动事件，根据滚动距离动态修改遮罩的透明起始位置。当滚动距离达到800px时，透明起始位置移到顶部，模糊容器完全显示，覆盖整个背景图。
4. 避免断层问题：单个容器的渐变遮罩是连续过渡的，不会出现两个子容器衔接时的模糊断层，完美符合需求。

注意事项 #

• 替换background-image中的URL为你的实际背景图路径。
• 可根据需求调整backdrop-filter的模糊值（blur()参数）和triggerScrollHeight的值，匹配你的页面设计。
• mask属性在部分旧浏览器中需要-webkit前缀，代码中已添加兼容处理。

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