Texte transparent

Bonjour
Désolé, je n'utilise pas "mix-blend-mode"
A+

voici mon code html/css

<section class="section1">
          <img src="img/velo.jpg" alt="velo" style="width: 100%;">
          <h1 class="titre-velo">LOCATION DE VELO</h1>
    </section>

.section1{
  margin: 80px 2% 50px;
  position: relative;
  text-align: center;
}
 
.titre-velo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 100px;
  color: white;
  text-shadow: 0 0 30px #000;
  mix-blend-mode: overlay;
}

j'ai l'impression que le texte est derriere le vélo et il n'est pas transparant

sans mix-blend-mode: overlay



avec mix-blend-mode: overlay

Bonjour
Vous devez adapter la couleur de votre texte à la teinte du fond (image).
De noir #000000 à Blanc #FFFFFF vous avez quelques millions de nuances.

Si vous n'êtes pas à l'aise avec les couleurs utilisez http://colorcop.net/download/ (privilégiez la version "stand alone" sans installation...

A+

le texte disparait il ne reste plus que son ombre

Bonjour
Vous pouvez ajouter dans votre CSS pour les instructions de votre texte:
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

Exemple: pour h1

h1 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 7vw; 
    font-style: normal;
	font-weight: normal;
	text-decoration: none;
	color:#ffffff; /* #000000=Noir #ffffff=Blanc */
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

A+

Il n'y a pas de transparance sur votre exemple

Bonjour,

Pour voir le code css utilisé, faire un clic droit dans la page puis cliquer sur Inspecter :
https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Open_the_Inspector

Ici la transparence est gérée avec la propriété mix-blend-mode :
https://developer.mozilla.org/fr/docs/Web/CSS/mix-blend-mode
https://la-cascade.io/css-blend-modes/

Un exemple : https://jsfiddle.net/54Lsn6zm/