Início / user-28103856

Teoom07's questions

Martin Hope
Teoom07
Asked: 2025-04-21 10:38:14 +0800 CST
  • 6

Há letras brancas em um fundo preto. Pode haver espaços retangulares entre as palavras que exibem o vídeo. Como posso obter esse comportamento? Tentei usar o mix-blende-mode, mas o elemento retângulo sempre desaparece no fundo pai. Tentei com pseudoelementos e atribuindo diferentes índices z/posições aos elementos, mas não consegui.

Aqui está um exemplo de como deveria ser: https://msttestaddfiles.netlify.app/part_2.mp4

E o que eu fiz abaixo

* {
        box-sizing: border-box;
    }
    html, body {
        block-size: 100%;
    }


    body {
        margin: 0;
    }

    .content {
        position: relative;
        width: 100%;
        height: 100%;
    }


    .text {
        font-size: 10vi;

    }



    .text-block {
        position: relative;
        z-index: 2;
        background-color: black;
        color: white;
        padding: 30px;
        width: 100%;
        height: 100%;
    }



    .rect {
        display: inline-block;
        width: 150px;
        height: 5vi;
        margin: 0 10px;
        position: relative;
        z-index: 1;

    }




    .video {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
<div class="content">
            <div class="text-block">
                <span class="text">We're here</span>
                <span class="rect"></span>
                <span class="text"> to make healthy </span>
                <span class="rect"></span>
                <span class="text">livin effortless,</span>
                <span class="text"> so you can</span>
                <span class="rect"></span>
                <span class="text">live longer</span>
                <span class="text">and happier</span>
                <span class="rect"></span>
            </div>
            <video class="video" autoplay loop muted playsinline>
                <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
            </video>
          
        </div>

html