Hogyan oldják meg, hogy átlátszó legyen a háttér de mégis látszódjon a szöveg?

Tegyél a képre egy overlay réteget.

Például így:

<style>

div {

position:absolute;

width:100%;

height: 100%;

background: url(801.jpg) no-repeat; /* Képet helyetesítsd a saját képpel vagy url-el */

left:0;

top:0;

}

h1 {

position:absolute;

margin: 0;

left: 50%;

top: 50%;

transform: translate(-40%, -50%);

width: 100%;

color: #ffffff;

font-size:8vw

}

.overlay {

margin: 0;

z-index=1;

background:#ff0000; /* Az átfedés színe */

opacity:0.5; /* Az átfedés átlátszósága 0.1-től 1-ig a nagyobb érték jobban fed*/

}

</style>

<div></div> /* Ez a kép div */

<div class='overlay'></div>

<h1>

Így gondoltad?

</h1>