如何为视频背景添加颜色叠加层？附HTML/CSS代码及示例链接

嘿，我来帮你搞定这个视频颜色叠加层的问题！结合常见的视频布局结构，我给你两种实用的实现方案，你可以根据自己的代码习惯选择：

方法一：用伪元素实现（推荐，无需额外HTML标签） #

这种方法不需要改动现有HTML结构，直接通过CSS给视频的父容器添加伪元素就能完成叠加效果，非常简洁。

假设你的HTML基础结构是这样的：

<div class="video-wrap">
  <video src="your-video-source.mp4" controls></video>
</div>

对应的CSS修改如下：

.video-wrap {
  position: relative; /* 让伪元素相对于容器定位 */
  display: inline-block; /* 自动适配视频宽度 */
}

.video-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 50, 200, 0.4); /* 前三个值是RGB颜色，最后一位是透明度0-1 */
  pointer-events: none; /* 关键：让鼠标事件穿透叠加层，不影响视频播放操作 */
}

video {
  display: block; /* 消除视频默认的底部间隙 */
  width: 100%;
}

方法二：添加显性叠加层div #

如果你更习惯用直观的HTML元素来控制叠加层，也可以在视频上方加一个独立的div：

修改后的HTML结构：

<div class="video-wrap">
  <video src="your-video-source.mp4" controls></video>
  <div class="color-overlay"></div>
</div>

对应的CSS样式：

.video-wrap {
  position: relative;
  display: inline-block;
}

.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #66ccff; /* 纯十六进制颜色 */
  opacity: 0.3; /* 单独设置透明度 */
  pointer-events: none;
}

video {
  display: block;
  width: 100%;
}

几个关键细节提醒： #

• 父容器必须设置position: relative，否则叠加层会相对于整个页面定位，偏离视频位置。
• pointer-events: none一定要加，不然叠加层会挡住视频的播放按钮、进度条等交互元素。
• 如果想让叠加颜色和视频画面融合得更自然，可以尝试添加mix-blend-mode属性，比如mix-blend-mode: multiply，不同的混合模式会带来不一样的视觉效果，你可以多试试~

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