Início / coding / Perguntas / 79583962
Accepted
Teoom07
Asked: 2025-04-21 10:38:14 +0800 CST

Como um elemento filho pode substituir o plano de fundo do seu elemento pai?

  • 772

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

2 respostas

  1. Best Answer

    Não tenho certeza se há uma maneira fácil, mas uma solução alternativa é duplicar o .text-blockelemento e posicioná-lo exatamente na mesma posição, digamos .text-block-copy.

    Então defina um deles ( .text-block) mostra apenas os retângulos e defina o seu mix-blend-modecomo multiply, para que os retângulos mostrem o que estiver atrás deles.

    Depois disso, o outro conjunto ( .text-block-copy) mostra apenas o texto com a cor branca, sem nenhuma mesclagem ou fundo.

    /* only shows rect, also blend */
.text-block {
  mix-blend-mode: multiply;
  background-color: black;
  color: transparent;
}
.text-block .rect {
  background-color: white;
}

/* only shows text */
.text-block-copy {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
}


    * {
  box-sizing: border-box;
}

html,
body {
  block-size: 100%;
}


body {
  margin: 0;
}

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

.text {
  font-size: 10vi;
}

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

.text-block, .text-block-copy {
  position: relative;
  z-index: 2;
  padding: 30px;
  width: 100%;
  height: 100%;
}

/* only shows rect, also blend */
.text-block {
  mix-blend-mode: multiply;
  background-color: black;
  color: transparent;
}
.text-block .rect {
  background-color: white;
}

/* only shows text */
.text-block-copy {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
}


.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>
  
  <div class="text-block-copy">
    <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>

    • 2 

  2. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }
        html, body {
            block-size: 100%;
        }
        body {
            margin: 0;
            background-color: black; /* Set black background */
        }
        .content {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .text {
            font-size: 10vi;
            position: relative;
            color: white; /* White text color */
        }
        .text-block {
            position: relative;
            z-index: 2; /* On top of the video */
            color: white;
            padding: 30px;
        }
        .rect {
            display: inline-block;
            width: 150px; /* Width of the rectangular space */
            height: 5vi; /* Height of the rectangular space */
            margin: 0 10px;
            position: relative;
            overflow: hidden; /* Ensures content doesn't overflow */
        }
        .video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1; /* Behind the text */
        }
        /* This will style the inner video in the .rect */
        .rect video {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="text-block">
            <span class="text">We're here</span>
            <span class="rect">
                <video autoplay loop muted playsinline>
                    <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
                </video>
            </span>
            <span class="text"> to make healthy </span>
            <span class="rect">
                <video autoplay loop muted playsinline>
                    <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
                </video>
            </span>
            <span class="text">livin effortless,</span>
            <span class="text"> so you can</span>
            <span class="rect">
                <video autoplay loop muted playsinline>
                    <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
                </video>
            </span>
            <span class="text">live longer</span>
            <span class="text">and happier</span>
            <span class="rect">
                <video autoplay loop muted playsinline>
                    <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
                </video>
            </span>
        </div>
        <video class="video" autoplay loop muted playsinline>
            <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
        </video>
    </div>
</body>
</html>

    • 1

relate perguntas