如何实现子元素覆盖父元素背景及文字间视频显示效果？

算力阿峰

2026-6-13

解决方案

要实现黑底白字、文字间矩形区域显示视频的效果，核心是让文本层的矩形区域“透”出下方的视频。你之前的问题在于文本容器的黑色背景完全遮挡了视频，以下是可行的实现方案：

实现思路

三层结构：最底层放视频，中间层是纯黑色背景，最上层是文本内容。
利用mix-blend-mode: screen混合模式：
- 白色文字与黑色背景混合后仍保持白色
- 矩形区域的黑色与黑色背景混合后会变为透明，从而透出下方的视频

完整代码

CSS

* {
    box-sizing: border-box;
}
html, body {
    block-size: 100%;
}
body {
    margin: 0;
}
.content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 避免视频溢出 */
}
.video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.black-bg {
    position: absolute;
    inset: 0;
    background-color: black;
}
.text-block {
    position: relative;
    z-index: 2;
    padding: 30px;
    color: white;
    font-size: 10vi;
    mix-blend-mode: screen;
}
.rect {
    display: inline-block;
    width: 150px;
    height: 5vi;
    margin: 0 10px;
    background-color: black;
}

HTML

<div class="content">
    <video class="video" autoplay loop muted playsinline>
        <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
    </video>
    <div class="black-bg"></div>
    <div class="text-block">
        <span>We're here</span>
        <span class="rect"></span>
        <span> to make healthy </span>
        <span class="rect"></span>
        <span>livin effortless,</span>
        <span> so you can</span>
        <span class="rect"></span>
        <span>live longer</span>
        <span>and happier</span>
        <span class="rect"></span>
    </div>
</div>