Texte transparent
Fermé
Max0123456
Messages postés
97
Date d'inscription
dimanche 24 octobre 2021
Statut
Membre
Dernière intervention
2 février 2023
-
20 nov. 2021 à 15:13
Utilisateur anonyme - 20 nov. 2021 à 19:30
Utilisateur anonyme - 20 nov. 2021 à 19:30
A voir également:
- Texte transparent
- Excel cellule couleur si condition texte - Guide
- Transcription audio en texte word gratuit - Guide
- Si cellule contient texte alors ✓ - Forum Excel
- Coeur transparent emoji ✓ - Forum Facebook
- Raccourci coeur blanc - Forum Facebook
7 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
20 nov. 2021 à 15:55
20 nov. 2021 à 15:55
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/
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/
Max0123456
Messages postés
97
Date d'inscription
dimanche 24 octobre 2021
Statut
Membre
Dernière intervention
2 février 2023
20 nov. 2021 à 17:21
20 nov. 2021 à 17:21
Il n'y a pas de transparance sur votre exemple
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
Modifié le 20 nov. 2021 à 18:18
Modifié le 20 nov. 2021 à 18:18
L'effet va dépendre de l'image de fond mais c'est bien le code utilisé sur le site :
https://jsfiddle.net/oyu37n1q/
https://jsfiddle.net/oyu37n1q/
Utilisateur anonyme
20 nov. 2021 à 17:45
20 nov. 2021 à 17:45
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
A+
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+
Max0123456
Messages postés
97
Date d'inscription
dimanche 24 octobre 2021
Statut
Membre
Dernière intervention
2 février 2023
20 nov. 2021 à 18:09
20 nov. 2021 à 18:09
le texte disparait il ne reste plus que son ombre
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Utilisateur anonyme
20 nov. 2021 à 18:17
20 nov. 2021 à 18:17
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+
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+
Max0123456
Messages postés
97
Date d'inscription
dimanche 24 octobre 2021
Statut
Membre
Dernière intervention
2 février 2023
20 nov. 2021 à 19:11
20 nov. 2021 à 19:11
voici mon code html/css
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
<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
