如何用HTML、CSS在视频下半部分添加颜色遮罩？

下面是经过验证的实现方法，核心是用相对定位的父容器+绝对定位的遮罩层来精准控制遮罩位置：

实现步骤 #

1. 用容器包裹视频和遮罩层，给容器设置position: relative，让遮罩层能基于它定位
2. 遮罩层设为绝对定位，固定在容器底部，高度设为50%（对应视频下半部分）
3. 通过background属性设置遮罩的颜色和透明度（用rgba可实现半透明效果）

完整代码示例 #

HTML结构 #

<div class="video-container">
  <video src="your-video-url.mp4" controls autoplay muted></video>
  <div class="video-overlay"></div>
</div>

CSS样式 #

.video-container {
  position: relative;
  width: 800px; /* 根据需求自定义宽度 */
  height: auto;
}

.video-container video {
  width: 100%;
  display: block; /* 消除视频下方默认空隙 */
}

.video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%; /* 覆盖视频下半部分 */
  background: rgba(0, 0, 0, 0.7); /* 黑色半透明，可自定义颜色和透明度 */
  pointer-events: none; /* 可选：让鼠标事件穿透遮罩，不影响视频操作 */
}

常见失败原因排查 #

如果你之前的overlay方法失效，大概率是以下问题：

• 未给父容器设置position: relative，导致遮罩层基于页面而非视频容器定位
• 遮罩层的高度或定位属性错误，比如仅设置top: 50%但未配合height: 50%
• 遮罩层级被视频覆盖，可给遮罩层加z-index: 1、视频加z-index: 0确保层级正确

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