求助：实现Hero视频底部与下方黑色Div的模糊融合效果

下面提供几种可行的方案，针对你不想模糊整个视频、只需要边缘融合的需求：

方案1：双层视频实现局部底部模糊 #

用两层视频叠加，底层保持清晰，顶层仅显示底部模糊区域，效果最自然且无需额外静态资源：

HTML结构 #

<div class="hero-container">
  <!-- 清晰的底层视频 -->
  <video class="hero-video hero-video-clear" autoplay muted loop>
    <source src="your-video.mp4" type="video/mp4">
  </video>
  <!-- 仅显示底部模糊区域的顶层视频 -->
  <video class="hero-video hero-video-blurred" autoplay muted loop>
    <source src="your-video.mp4" type="video/mp4">
  </video>
  <div class="black-div">
    <!-- 你的下方内容 -->
  </div>
</div>

CSS样式 #

.hero-container {
  position: relative;
  width: 100%;
}

.hero-video {
  width: 100%;
  height: auto;
  display: block;
}

.hero-video-clear {
  position: relative; /* 底层正常占位显示 */
}

.hero-video-blurred {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 120px; /* 调整这个值控制模糊区域的高度 */
  filter: blur(8px); /* 模糊程度可自定义 */
  /* 用遮罩让顶部透明，仅保留底部模糊部分 */
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(0,0,0,0));
}

.black-div {
  background-color: #000;
  padding: 60px 20px;
  margin-top: -40px; /* 让黑色Div与模糊层重叠，增强融合感 */
  position: relative;
  z-index: 1;
}

方案2：给黑色Div顶部添加backdrop-filter模糊层 #

如果不想修改视频结构，可以直接在黑色Div顶部加一个模糊过渡层，利用backdrop-filter模糊背后的视频内容：

HTML结构 #

<div class="hero-container">
  <video class="hero-video" autoplay muted loop>
    <source src="your-video.mp4" type="video/mp4">
  </video>
  <div class="black-div">
    <div class="div-blur-overlay"></div>
    <!-- 你的下方内容 -->
  </div>
</div>

CSS样式 #

.hero-container {
  position: relative;
  width: 100%;
}

.hero-video {
  width: 100%;
  height: auto;
  display: block;
}

.black-div {
  background-color: #000;
  padding: 60px 20px;
  position: relative;
  margin-top: -80px; /* 让Div向上覆盖视频底部 */
}

.div-blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; /* 模糊过渡区域高度 */
  backdrop-filter: blur(8px); /* 模糊程度 */
  /* 渐变遮罩让模糊区域自然过渡到纯黑 */
  background: linear-gradient(to bottom, transparent 10%, #000 100%);
}

注意：backdrop-filter需要浏览器支持，目前Chrome、Firefox、Safari等主流浏览器均已支持。

方案3：静态帧模糊过渡层（性能优先） #

如果对性能要求极高，不想加载两层视频，可以截取视频底部一帧作为模糊层的背景：

HTML结构 #

<div class="hero-container">
  <video class="hero-video" autoplay muted loop>
    <source src="your-video.mp4" type="video/mp4">
  </video>
  <div class="video-blur-overlay"></div>
  <div class="black-div">
    <!-- 你的下方内容 -->
  </div>
</div>

CSS样式 #

.hero-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: auto;
  display: block;
}

.video-blur-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  /* 用视频底部帧作为背景，添加模糊和渐变 */
  background: linear-gradient(to bottom, transparent, #000), url('your-video-bottom-frame.jpg');
  background-position: bottom;
  background-size: 100% auto;
  filter: blur(8px);
  transform: translateY(50%); /* 调整位置让模糊层与视频底部对齐 */
  z-index: 1;
}

.black-div {
  background-color: #000;
  padding: 60px 20px;
  position: relative;
  z-index: 2;
}

你可以根据自己的实际场景选择合适的方案，调整模糊程度、过渡高度等参数来达到最佳融合效果。

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