Discussion :

[Alex1234567]

bonjour,

j'ai essayé de reproduire cet effet mais 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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
}

[jreaux62]

Bonjour,

voir :

• CSS - background-clip

[EDIT] Je ne connaissais pas mix-blend-mode
Merci

• https://codepen.io/jreaux62/pen/VwzNZmG