如何通过CSS或Bootstrap为Hero区域的Video标签添加暗遮罩

针对视频亮度偏高遮挡白色内容的问题，以下是两种实用的解决方法，结合你的现有代码给出具体修改方案：

方法一：使用CSS filter 属性直接调暗视频 #

通过CSS的brightness()滤镜可直接调整视频亮度，数值范围0-1（0为全黑，1为原亮度），数值越小视频越暗。

修改步骤： #

1. 在scoped样式中添加自定义类：

<style lang="scss" scoped>
.video-dimmed {
  filter: brightness(0.6); /* 可按需调整，比如0.5更暗、0.7稍亮 */
}
</style>

2. 给<video>标签添加该类：

<video class="video-dimmed position-absolute h-100" src="/assets/media/hero-video.mp4" muted autoplay loop/>

方法二：利用Bootstrap叠加层实现遮罩调暗 #

在视频上方添加半透明遮罩层，相比滤镜更灵活，还能自定义遮罩颜色（如黑色、深蓝色），适合统一视觉风格的场景。

修改步骤： #

在<video>标签之后、内容容器之前，插入全屏遮罩div，用Bootstrap内置类快速实现：

<video class="position-absolute h-100" src="/assets/media/hero-video.mp4" muted autoplay loop/>
<!-- 新增Bootstrap遮罩层 -->
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-50 z-1"></div>

• position-absolute top-0 start-0：让遮罩从容器左上角定位
• w-100 h-100：确保遮罩铺满整个容器
• bg-dark：使用黑色背景，也可替换为bg-primary等其他颜色类
• opacity-50：设置遮罩透明度（50%），可调整为opacity-30/opacity-70等
• z-1：确保遮罩在视频上方、内容下方，避免遮挡文字

额外提示 #

如果已有bg-overlay-500类未生效，大概率是视频层级高于遮罩层，添加z-1类即可解决层级问题；两种方法可叠加使用，实现更精细的调暗效果。

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