JSFiddle - React, Tailwind, and code Playground

by adonis11

HTML

<body>
    <div class="box">
	   <h1>Полупрозрачный текст на фоне</h1>
    </div>
  </body>

CSS

body, h1 {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

.box {
	height: 100vh;
	background: url(https://cdn.pixabay.com/photo/2018/03/19/20/20/wheat-3241114_1280.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

h1 {
	font-size: 6em;
	position: absolute;
	top: 30%;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 5px 10px rgba(0,0,0,1);
	box-shadow: 0 5px 10px rgba(0,0,0,1);
	mix-blend-mode: overlay;
	background: rgba(0,0,0,.3);
	color: rgba(255, 255, 255, 0.7);
}