How do I make this effect of letters over the image that is like Background, or how do I search for it in google?
Background background with text
3
asked by anonymous 09.02.2018 / 02:47
2 answers
4
Based on Marcelo Rafael's comment, I have found a solution for your case.
Support is even interesting, as you can see this link of 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>
09.02.2018 / 08:10
2
I'll give you a solution using mix-blend-mode: overlay; in the text, and two backgrounds on the background, one with the image, and one with the black layer with transparency on top.
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>
10.02.2018 / 19:30