-1

Olá

Eu estava a fazer um titulo transparente e eu queria que dentro do texto se visse o background mas não o background da caixa.

inserir a descrição da imagem aqui

Ao seja, dentro das letras via-se a imagem de background mas dentro do texto eu não quero aquela cor branca do fundo do texto.

Aqui está o meu HTML, o que posso fazer para o fill das letras seja a imagem de fundo e não a caixa branca?

#geraltudo .conteudocapa h1 {
  font-size: 75px;
  font-family: 'Tw Cen MT Condensed extra bold', sans-serif;
  -webkit-text-stroke: 2px black;
  -webkit-text-fill-color: rgb(0, 0, 0, 0);
  text-transform: uppercase;
}

#geraltudo .conteudocapa {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgb(255, 255, 255, 0.7);
  padding: 20px;
  color: black;
  border-radius: 20px;
}

#geraltudo {
 background-image: url("/w3images/photographer.jpg");
  background-color: red;
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
<div id="geraltudo">
  <div class="conteudocapa">
    <h1>Voar sobre o Paiva</h1>
  </div>
</div>

Neste caso, através do html que coloquei o fundo teria de ser vermelho mas sem colocar o fill do texto como vermelho.

0

1 Resposta 1

2

Para fazer o efeito faltou basicamente vc repetir o background do fundo no próprio texto, colocando um background-image no h1. e Tb faltou fazer o clip do texto, para isso se usa a propriedade -webkit-background-clip: text;

OBS: Em algumas imagens que tenham uma figura muito bem definida como bg pode ser que o "overlay" das imagens do bg vs. texto não fique perfeito...

inserir a descrição da imagem aqui

#geraltudo .conteudocapa h1 {
  font-size: 75px;
  font-family: 'Tw Cen MT Condensed extra bold', sans-serif;
  -webkit-text-stroke: 2px black;
  -webkit-text-fill-color: rgb(0, 0, 0, 0);
  text-transform: uppercase;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-background-clip: text;
  background-image: url(https://unsplash.it/300/200);
}

#geraltudo .conteudocapa {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgb(255, 255, 255, 0.7);
  padding: 20px;
  color: black;
  border-radius: 20px;
}

#geraltudo {
  background-image: url(https://unsplash.it/300/200);

  background-color: red;
  height: 500px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
<div id="geraltudo">
  <div class="conteudocapa">
    <h1>Voar sobre o Paiva</h1>
  </div>
</div>

3
  • O problema é que eu não tenho uma imagem como background, tenho um video autoplay loop, faz se da mesma forma mas sem o background image?
    – David Mv
    Commented 5/05/2021 às 12:07
  • 2
    @DavidMv eu respondi ao que estava na pergunta, se tu queria com vídeo devia ter falado que era com vídeo. Eu não entendo essas coisas, vc já está no site há algum tempo e até hj não aprendeu a fazer uma simples pergunta... Vc pergunta uma coisa, a gente perde um tempo para tentar te ajudar, ai vc vem e fala "aiii é que na verdade eu queria era outra coisa...". Se vira ai com a resposta que dei, não respondo mais as suas perguntas. Abs
    – hugocsl
    Commented 5/05/2021 às 12:24
  • Okey, peço desculpa pela perda de tempo eu só achei que fosse da mesma forma. Obrigado pela resposta a pergunta vou tentar aproveitar isso para me virar.
    – David Mv
    Commented 5/05/2021 às 12:27

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .