Background with text background

Asked

Viewed 376 times

3

How do I make this effect of letters on top of the image that is like Background, or how I search for it in google?

inserir a descrição da imagem aqui

javascript html css

  • Unfortunately this is not yet possible. There is a related question: https://answall.com/q/255444/8063

  • 1

    My example: https://codepen.io/thecodermarcelo/pen/jZyvdV observe background-clip and text-fill-color.

  • I may not have quite understood your question. But I think you can make a similar effect that way. https://codepen.io/BrenoRUCHbr/pen/vdxPOG

  • Do you think your answer is satisfactory? You can mark it as you accept?

2 answers

3


Based on the comment of Marcelo Rafael, I got a solution to your case.

The support is kind of interesting, as you can see at this link 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>

  • Valeu helped me out

2

I’ll give you a solution using mix-blend-mode: overlay; in the text, and two backgrounds in the background, one with the image, and one with the black layer with transparency over.

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>

  • Valeu helped me out

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.