Transparent Text

Transparent Text on white semi-background and background-image

by Patrick von Lieres

HTML

<div class="container">
    <h1><span>HELLO<br/>WORLD</span></h1>
</div>

CSS

.container { 
	background: url('https://unsplash.imgix.net/46/3YNGIU4yRTO4DDifrEfA__MG_2885.jpg?q=75&w=1080&h=1080&fit=max') center center no-repeat; 
	height: 45em; 
	width: 55em; 
}
h1 { 
	background-color: rgba(255, 255, 255, .8); 
	overflow: hidden;
	display: block; 
	font: 600 100px sans-serif;
	width: 100%;
	height: 100%;
	position: relative;
}
span { 
	background: url(https://unsplash.imgix.net/46/3YNGIU4yRTO4DDifrEfA__MG_2885.jpg?q=75&w=1080&h=1080&fit=max) center center no-repeat;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	display:block;
	text-align: center;
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
    left: 0;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}