1. Introduction à l'attribut mix-blend-mode 2. Valeurs d'attribut communes du mix-blend-mode 3. Application de l'attribut mix-blend-mode 1. Effet d'application 2. Code associé 4. Contexte d'adaptation intelligent du texte 1. Style original 2. Ajouter un mélange 3. Code d'implémentation
L' attribut [ mix-blend-mode ] en CSS décrit comment le contenu d'un élément doit être mélangé avec le contenu de l'élément parent immédiat de l'élément et l'arrière-plan de l'élément ;
Utilisé pour définir le mode de fusion entre l'arrière-plan et le premier plan d'un élément ; peut être appliqué à n'importe quel élément ; peut être utilisé avec l'attribut background-image pour créer une variété d'effets visuels différents ;
| numéro de série | valeur d'attribut | Modes de fusion et instructions |
|---|---|---|
| 1 | mode mix-blend : normal ; | Normal : cette propriété n'applique aucun mélange ; |
| 2 | mix-blend-mode : multiplier ; | Multiplier : L'élément est multiplié par l'arrière-plan et remplace la couleur d'arrière-plan. La couleur résultante est toujours aussi sombre que l'arrière-plan ; |
| 3 | mix-blend-mode : superposition ; | Superposition : multiplie ou masque le contenu en fonction de la couleur d'arrière-plan, par opposition au mode de fusion Hard Light ; |
| 4 | mix-blend-mode : écran ; | Écran : Multipliez le fond et le contenu, puis complétez le résultat. Cela aura pour conséquence que le contenu sera plus clair que la couleur d'arrière-plan ; |
| 5 | mix-blend-mode : assombrir ; | Assombrir ; lorsque le contenu est assombri, l'arrière-plan sera remplacé par le contenu, sinon il restera tel quel ; |
| 6 | mix-blend-mode : éclaircir ; | Éclaircir : l'arrière-plan est remplacé par un contenu plus clair ; |
| 7 | mode mix-blend : couleur-esquive ; | Couleur plus claire : cette propriété éclaircit la couleur d'arrière-plan pour refléter la couleur du contenu ; |
| 8 | mode mix-blend : couleur-brûlure ; | Éclaircissement des couleurs : cela assombrit l'arrière-plan pour refléter la couleur naturelle du contenu ; |
| 9 | mode mix-blend : lumière dure ; | Lumière dure : Selon la couleur du contenu, cette propriété le filtrera ou le multipliera ; |
| 10 | mode mix-blend : lumière douce ; | Lumière douce : selon la couleur du contenu, cela l'assombrira ou l'éclaircira ; |
| 11 | mix-blend-mode : différence ; | Différence : Cela soustraira la plus foncée des deux couleurs de la couleur la plus claire ; |
| 12 | mode mix-blend : exclusion ; | Exclure : similaire à la différence, mais avec un contraste plus faible ; |
| 13 | mix-blend-mode : teinte ; | Teinte : Crée de la couleur en combinant la teinte du contenu avec la saturation et la luminosité de l'arrière-plan ; |
| 14 | mode mix-blend : saturation ; | Saturation : Crée de la couleur grâce à la saturation du contenu ainsi qu'à la teinte et à la luminosité de l'arrière-plan ; |
| 15 | mix-blend-mode : couleur ; | Mélange de couleurs : créez des couleurs en fonction de la teinte et de la saturation du contenu et de la luminosité de l'arrière-plan ; |
| 16 | mix-blend-mode : luminosité ; | Luminosité : Crée des couleurs basées sur la luminosité du contenu ainsi que sur la teinte et la saturation de l'arrière-plan. C'est l'opposé de la propriété color ; |
normal : cet attribut n'applique aucun mélange.multiply : l'élément est multiplié par l'arrière-plan et remplace la couleur d'arrière-plan. La couleur résultante est toujours aussi sombre que l'arrière-plan.screen : multiplie l'arrière-plan et le contenu complète ensuite le résultat. donne un contenu plus clair que background-color.overlay : multiplie ou filtre le contenu en fonction de la couleur d'arrière-plan. C'est l'inverse du mode de fusion hard-light.darken : l'arrière-plan est remplacé par le contenu là où se trouve le contenu. plus sombre, sinon, il reste tel qu'il était.lighten : l'arrière-plan est remplacé par le contenu dont le contenu est plus clair.color-dodge : cet attribut éclaircit la couleur d'arrière-plan pour refléter la couleur du contenu.color-burn : cela assombrit l'arrière-plan pour refléter la couleur naturelle du contenu.hard-light : selon la couleur du contenu cet attribut le filtrera ou le multipliera.soft-light : selon la couleur du contenu cela l'assombrira ou l'éclaircira.différence : cela soustrait le plus foncé des deux couleurs de la couleur la plus claire.exclusion : similaire à la différence mais avec un contraste plus faible.hue : crée une couleur avec la teinte du contenu combinée avec la saturation et la luminosité de l'arrière-plan.saturation : crée une couleur avec la saturation du contenu combinée avec la teinte et la luminosité du background.color : crée une couleur avec la teinte et la saturation du contenu et la luminosité du background.luminosity : crée une couleur avec la luminosité du contenu et la teinte et saturation de l'arrière-plan. C'est l'inverse de l'attribut de couleur.
Cliquez sur l'affichage de l'effet
Application de l'attribut mix-blend-mode
<!DOCTYPEhtml>
<html lang="fr">
<tête>
<méta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application de l'attribut mix-blend-mode</title>
<style>
* {
marge : 0 ;
remplissage : 0 ;
}
.conteneur {
/* Définir des variables */
--mix-blend-mode : normal ;
position : relative ;
largeur : 300 px ;
hauteur : 400px ;
marge : 60px ;
remplissage : 20 px ;
ombre de la boîte : 0 0 6px 1px #999 ;
rayon de bordure : 6 px ;
couleur du curseur : transparent ;
}
h3,
h4 {
marge inférieure : 10 px ;
}
.info-box {
largeur : 100 % ;
hauteur : 24px ;
hauteur de ligne : 24 px ;
}
.cercle {
position : absolue ;
largeur : 200 px ;
hauteur : 200 px ;
rayon de bordure : 50 % ;
mix-blend-mode : var(--mix-blend-mode);
}
.red-box {
gauche : 70px ;
haut : 160 px ;
couleur de fond : rouge ;
}
.boîte verte {
gauche : 30px ;
haut : 220 px ;
couleur de fond : vert clair ;
}
.boîte bleue {
gauche : 110px ;
haut : 220 px ;
couleur de fond : bleu ;
}
</style>
</tête>
<corps>
<div class="conteneur">
<h3>Application de l'attribut mix-blend-mode</h3>
<h4 class="value-box"></h4>
<div class="info-box"></div>
<div class="circle red-box"></div>
<div class="circle green-box"></div>
<div class="circle blue-box"></div>
</div>
</corps>
<script>
// Récupère les éléments var conteneur = document.querySelector(".container");
var valueBox = document.querySelector(".value-box");
var infoBox = document.querySelector(".info-box");
//La liste de valeurs et la description de l'attribut mix-blend-mode ;
valeurs var = [
{
identifiant : 1,
nom : "normal",
valeur : "normale",
info: "Cette propriété n'applique aucun mélange ;"
},
{
identifiant : 2,
nom : "multiplier",
valeur : "multiplier",
info: "L'élément est multiplié par l'arrière-plan et remplace la couleur d'arrière-plan. La couleur résultante est toujours aussi sombre que l'arrière-plan ;"
},
{
identifiant : 3,
nom : "superposition",
valeur : "superposition",
info: "Multipliez ou masquez le contenu en fonction de la couleur d'arrière-plan ; c'est l'opposé du mode de fusion de lumière dure ;"
},
{
ID : 4,
nom : "écran",
valeur : "écran",
info: "Multipliez l'arrière-plan et le contenu, puis complétez le résultat. Le contenu sera ainsi plus clair que la couleur d'arrière-plan ;"
},
{
identifiant : 5,
nom: "Sombre",
valeur : "assombrir",
info: "Lorsque le contenu est assombri, l'arrière-plan sera remplacé par le contenu, sinon il restera tel quel ;"
},
{
identifiant : 6,
nom : "éclairer",
valeur : "alléger",
info: "L'arrière-plan est remplacé par un contenu plus clair ;"
},
{
identifiant : 7,
nom : "La couleur s'estompe",
valeur : "couleur-esquive",
info: "Cette propriété éclaircit la couleur d'arrière-plan pour refléter la couleur du contenu ;"
},
{
identifiant : 8,
nom : "La couleur s'estompe",
valeur : "couleur-brûlure",
info: "Cela assombrit l'arrière-plan pour refléter la couleur naturelle du contenu ;"
},
{
identifiant : 9,
nom : « lumière dure »,
valeur : "hard-light",
info: "Cette propriété filtrera ou multipliera le contenu en fonction de sa couleur."
},
{
identifiant : 10,
nom : « lumière douce »,
valeur : "lumière douce",
info: "Selon la couleur du contenu, cela l'assombrira ou l'éclaircira ;"
},
{
identifiant : 11,
nom : "Différence",
valeur : "différence",
info: "Cela soustraira la plus foncée des deux couleurs de la couleur la plus claire ;"
}, {
identifiant : 12,
nom : "exclure",
valeur : "exclusion",
info : "Semblable à la différence, mais avec un contraste plus faible ;"
},
{
identifiant : 13,
nom: "Teinte",
valeur : "teinte",
info : "Créez de la couleur en combinant la teinte du contenu avec la saturation et la luminosité de l'arrière-plan ;"
},
{
identifiant : 14,
nom : "saturation",
valeur : "saturation",
info : "Créer de la couleur à partir de la saturation du contenu et de la teinte et de la luminosité de l'arrière-plan ;"
},
{
identifiant : 15,
nom: "Mélange de couleurs",
valeur : "couleur",
info : "Créez une couleur basée sur la teinte et la saturation du contenu et la luminosité de l'arrière-plan ;"
},
{
identifiant : 16,
nom : "luminosité",
valeur : "luminosité",
info: "Crée une couleur basée sur la luminosité du contenu ainsi que sur la teinte et la saturation de l'arrière-plan. C'est l'opposé d'une propriété de couleur ;"
}
]
changeMode();
//Changer le mode mix-blend
fonction changementMode() {
soit l'indice = 0 ;
modAttr(index);
laissez timerId = setInterval(() => {
if (index >= valeurs.longueur) {
clearInterval(timerId);
retour;
}
indice++;
modAttr(index)
}, 3000)
}
fonction modAttr(index) {
//Définissez la valeur de la propriété mix-blend-mode containers.style.setProperty('--mix-blend-mode', values[index].value);
valueBox.innerHTML = `mix-blend-mode : ${values[index].value};`;
infoBox.innerHTML = `${values[index].name}(${values[index].value}) : ${values[index].info}`
}
</script>
</html>Souvent, le texte doit être affiché à côté de l'image. Si la couleur du texte et de l'image est proche, la lisibilité sera sérieusement affectée ;
Comment puis-je adapter automatiquement le texte à l’arrière-plan ?
Vous pouvez utiliser l'attribut mix-blend-mode pour définir le mélange de couleurs du texte et de l'arrière-plan afin d'obtenir l'effet d'adaptation du texte à l'arrière-plan ;
La couleur du texte est blanche ; la lisibilité est mauvaise sur certaines images ;
.élément-grille > h3 {
couleur : RVB (255, 255, 255) ;
...
}
Définissez l'attribut mix-blend-mode sur différence ;
La valeur initiale de la couleur du texte est le blanc, mais la différence sera calculée avec la valeur de couleur de chaque pixel correspondant au fond de l'élément parent pour obtenir une nouvelle valeur de couleur ;
Valeur de couleur du texte - valeur de couleur d'arrière-plan = valeur de pixel mixte (chaque pixel) ;
Par exemple : couleur du texte (255, 255, 255), couleur de fond (255, 255, 255), valeur calculée (0, 0, 0), affichée en noir ;
.élément-grille>h3 {
couleur : RVB (255, 255, 255) ;
/* Définir le mode de fusion -- calculer la différence */
mix-blend-mode : différence ;
...
}Remarque : Le mode de fusion différentiel est ici appliqué au texte ;
<!DOCTYPEhtml>
<html lang="fr">
<tête>
<méta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Le texte s'adapte intelligemment à l'arrière-plan</title>
<style>
* {
marge : 0 ;
remplissage : 0 ;
}
.conteneur {
affichage : flexible ;
largeur : 100vw ;
hauteur : 60vh ;
justifier-contenu : centre ;
aligner les éléments : centre ;
}
.grid-conteneur {
affichage : grille ;
colonnes de modèle de grille : 400px 400px 400px ;
lignes de modèle de grille : 200 px 200 px ;
écart : 10 px ;
}
.élément de grille {
répétition d'arrière-plan : pas de répétition ;
taille de l'arrière-plan : couverture ;
rayon de bordure : 6 px ;
ombre de la boîte : 0 0 6px 1px #999 ;
}
.élément-grille>h3 {
couleur : RVB (255, 255, 255) ;
taille de police : 36 px ;
/* Définir le mode de fusion -- calculer la différence */
mix-blend-mode : différence ;
}
.grid-item:nt-enfant(1) {
/* image d'arrière-plan : url("D:\test\zyl-img\bg_1.jpg"); */
couleur de fond : rouge
}
.grid-item:nt-enfant(2) {
/* image d'arrière-plan : url("D:\test\zyl-img\bg_2.jpg"); */
couleur de fond : violet ;
}
.grid-item:nt-enfant(3) {
/* image d'arrière-plan : url("D:\test\zyl-img\bg_3.jpg"); */
couleur de fond : jaune ;
}
.grid-item:nt-enfant(4) {
/* image d'arrière-plan : url("D:\test\zyl-img\bg_4.jpg"); */
couleur de fond : vert ;
}
.grid-item:nt-enfant(5) {
/* image d'arrière-plan : url("D:\test\zyl-img\bg_5.jpg"); */
couleur de fond : bleu sarcelle ;
}
.grid-item:nt-enfant(6) {
/* image d'arrière-plan : url("D:\test\zyl-img\bg_6.jpg"); */
couleur de fond : bleu ;
}
</style>
</tête>
<corps>
<div class="conteneur">
<div class="grid-container">
<div class="grid-item">
<h3>Application de l'attribut mix-blend-mode</h3>
</div>
<div class="grid-item">
<h3>Application de l'attribut mix-blend-mode</h3>
</div>
<div class="grid-item">
<h3>Application de l'attribut mix-blend-mode</h3>
</div>
<div class="grid-item">
<h3>Application de l'attribut mix-blend-mode</h3>
</div>
<div class="grid-item">
<h3>Application de l'attribut mix-blend-mode</h3>
</div>
<div class="grid-item">
<h3>Application de l'attribut mix-blend-mode</h3>
</div>
</div>
</div>
</corps>
</html>Ceci conclut cet article sur l'explication détaillée de l'attribut mix-blend-mode en CSS (définition du mode de mixage d'un élément). Pour plus d'informations sur l'attribut CSS mix-blend-mode, veuillez rechercher les articles précédents sur downcodes.com ou). Continuez à parcourir les articles pertinents ci-dessous et j'espère que vous soutiendrez downcodes.com à l'avenir !