3

Como eu faço para fazer esse efeito de letras em cima da imagem que está como Background, ou como eu procuro por isso no google?

inserir a descrição da imagem aqui

4

2 Respostas 2

3

Com base no comentário do Marcelo Rafael, consegui uma solução para o seu caso.

O suporte é até que interessante, como pode ver neste link do Can I Use.

.text {
	width: 100%;
	height: 100vh;
	background: url('https://www.screenaustralia.gov.au/sacms/media/samedialibrary/screenguide/titles/tid33797-mountain/tid33797-web/tid33797-mountain-001-hero.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	font-weight: bold;
	font-family: verdana, sans-serif;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	display: flex;
	justify-content: center;
	align-items:  center;
  flex-direction: column;
	text-align: justify;
	max-width: 100%;
	}
	span{
		text-shadow: 0 0 20px rgba(255,255,255,.2);
    font-size: 7em;
	}
  p{
    -webkit-text-fill-color: #fff;
    font-family: 'Helvetica', 'Source Sans', sans-serif;
  }
	body {
	background: url('https://www.screenaustralia.gov.au/sacms/media/samedialibrary/screenguide/titles/tid33797-mountain/tid33797-web/tid33797-mountain-001-hero.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	max-width: 100wh;
	padding: 0;
	margin: 0;

}
.outer-text{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.7);
}
<body>
	<div class="outer-text">
		<div class="text">
			<span>Stack.</span>
      <p>É divertido ajudar.</p>
		</div>
	</div>
</body>

1
  • Valeu me ajudou
    – Henrique
    Commented 12/02/2018 às 23:21
2

Vou te dar uma solução usando mix-blend-mode: overlay; no texto, e dois backgrounds no fundo, um com a imagem, e um com a camada preta com transparência por cima.

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
}

header {
	margin: auto;
    overflow: hidden;
    height: 100%;
	width: 100%;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_03.jpg);
	background-size: cover;
}

h2 {
    color: #fff;
    font-size: 10vw;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    mix-blend-mode: overlay;
}
<header>
    <h2 contentEditable role='textbox' aria-multiline='true' >And stay alive</h2>
</header>

1
  • Valeu me ajudou
    – Henrique
    Commented 12/02/2018 às 23:21

Você deve fazer log-in para responder a esta pergunta.

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