Comment afficher du texte sur une image avec CSS3 Mix-blend-Mode
Fonds d'image fière allure derrière de grands textes d'affichage. Cependant, son implémentation CSS n’est pas aussi simple. Nous pouvons utiliser le background-clip: texte; propriété, mais il s'agit toujours d'une fonctionnalité expérimentale sans un support suffisant du navigateur.
L’alternative CSS pour afficher un fond d’image derrière un texte est en utilisant le mode mélange propriété. Modes de fusion pour les éléments HTML sont assez bien supportés par tous les navigateurs de bureau et mobiles modernes, à l'exception de quelques-uns, tels que Internet Explorer.
Dans ce post, nous allons voir comment mode mélange (deux de ses modes spécifiquement) fonctionne, et comment vous pouvez l'utiliser pour afficher un texte avec un fond d'image dans deux cas d'utilisation:
- quand l'image de fond peut être vu à travers le texte
- quand l'image de fond tourne autour le texte
Voir quelques exemples dans la démo ci-dessous (les images proviennent de unsplash.com).
le mode mélange La propriété CSS définit comment la contenu et le toile de fond d'un élément HTML devrait mélanger les couleurs.
Regardez la liste des modes de fusion, parmi lesquels nous allons utiliser multiplier et écran dans ce post.
Commençons par examiner le fonctionnement de ces deux modes de fusion spécifiques..
Comment multiplier Et écran les modes de fusion fonctionnent
Les modes de fusion sont techniquement des fonctions qui calculer une valeur de couleur finale en utilisant les composantes de couleur d'un élément et de sa toile de fond.
le multiplier mode de fusion
dans le multiplier mode de fusion, les couleurs individuelles des éléments et leurs fonds sont multiplié, et la couleur résultante est appliquée à la version finale mélangée.
le multiplier Le mode de fusion est calculé selon la formule suivante:
B (Cb, Cs) = Cb × Cs
où:Cb - Composant de couleur de la toile de fondCs - Composant couleur de l'élément sourceB - Fonction de mélange
Quand Cb et Cs sont multipliés, la couleur résultante est un mélange de ces deux composants de couleur et aussi sombre que la plus sombre des deux couleurs.
Pour créer l’arrière-plan de notre image texte, nous devons nous concentrer sur le cas lorsque Cs (la composante couleur de l’élément source) est soit noir ou blanc.
Si Cs est noir sa valeur est 0, la couleur de sortie sera également noir, car Cb × 0 = 0. Ainsi, lorsque l'élément est coloré en noir, il peu importe la couleur de la toile de fond, tout ce que nous pouvons voir après le mélange est noir.
Si Cs est blanc sa valeur est 1, la couleur de sortie est ce que vous voulez Cb c'est parce queCb × 1 = Cb. Donc, dans ce cas, nous voyons la toile de fond directement tel quel.
le écran mode de fusion
le écran mode de fusion fonctionne de manière similaire à la multiplier mode de fusion, mais avec le résultat opposé. Donc, un premier plan noir montre la toile de fond tel quel, et un le premier plan blanc montre le blanc quelle que soit la toile de fond.
Voyons rapidement sa formule:
B (Cb, Cs) = Cb + Cs - (Cb × Cs)
Quand Cs est noir (0), la couleur de fond sera montrée après le mélange, comme suit:
Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb
Quand Cs est blanc (1) le résultat sera blanc avec n'importe quel fond, comme:
Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1
1. Image montrée à travers le texte
Pour afficher le texte affiché à travers son image d'arrière-plan, nous utilisons le écran mode de fusion avec texte noir et espace blanc.
Eau
.toile de fond largeur: 600px; hauteur: 210px; background-image: url (someimage.jpg); taille du fond: 100%; marge: auto; .text color: black; couleur de fond: blanc; mode mix-blend: écran; largeur: 100%; hauteur: 100%; taille de police: 160 pts; poids de police: plus gras; text-align: center; hauteur de ligne: 210px; marge: 0;
Actuellement, notre texte ressemble à celui ci-dessous, à l'étape suivante, nous allons ajouter une couleur personnalisée à l'arrière-plan.
Ajout de couleur
Comme vous l'avez peut-être deviné, l'utilisation des modes de fusion ne nous laisse que deux choix de couleur pour la zone entourant le texte. - noir ou blanc. toutefois avec du blanc, il est possible d'ajouter de la couleur en utilisant une superposition, si la couleur de superposition correspond bien à l'image utilisée.
Pour ajouter de la couleur à la zone environnante, ajoutez un Eau Avec cette technique, nous pourrions colorier la zone entourant le texte avec le fond de l'image: Notez que la technique ne fonctionne bien qu'avec subtiles couleurs transparentes. Si vous utilisez une couleur totalement opaque ou une couleur qui ne correspond pas à l'image, l'image apparaissant dans le texte aura une teinte très visible de la couleur utilisée., éviter les couleurs opaques. Même si un texte normal est placé sur un fond d’image nécessite la même technique, Je vais vous montrer un exemple de la façon dont la démo ci-dessus ressemble lorsque le l'effet est inversé, c'est-à-dire lorsque la couleur du texte est blanche et que l'arrière-plan est noir. Vous pouvez utiliser le même recouvrement afin d'ajouter de la couleur au texte, à moins que vous ne vouliez le garder en blanc. Et ci-dessous, vous pouvez voir à quoi ressemble le cas inverse: Notez que dans Internet Explorer ou tout autre navigateur ne prenant pas en charge la mode mix-blend: multiplie propriété pour la superposition, car il aide la couleur de fond de la superposition à mélanger un peu mieux avec l'image apparaissant à l'intérieur du texte.
.superposition couleur d'arrière-plan: rgba (0,255,255, .1); mode mix-blend: multiplie; largeur: 100%; hauteur: 100%; position: absolue; en haut: 0;
2. Texte entouré par le fond de l'image
.text color: white; couleur de fond: noir; mode mix-blend: écran; largeur: 100%; hauteur: 100%; taille de police: 160 pts; poids de police: plus gras; text-align: center; hauteur de ligne: 210px; marge: 0;
.superposition couleur d'arrière-plan: rgba (0,255,255, .1); mode mix-blend: multiplie; largeur: 100%; hauteur: 100%; position: absolue; en haut: 0;
mode mélange propriété, l'arrière-plan de l'image n'apparaîtra pas et le texte restera noir (ou blanc).
