Background-blend-mode - Astuces CSS

La background-blend-modepropriété définit la manière dont un élément background-imagedoit se fondre avec son background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Voir le Pen background-blend-mode par CSS-Tricks (@ css-tricks) sur CodePen.

Dans la démo ci-dessus, la valeur par défaut background-imagesur la gauche n'a pas de mode de fusion défini et donc l'image chevauche le background-color. Sur la droite cependant, le mode de fusion a modifié le background-imageavec le rouge en background-colordessous. Mais notez que la couleur du texte n'a pas été affectée par cette propriété supplémentaire.

Valeurs

initial: la valeur par défaut sans mélange.
inherit: hérite du mode de fusion de l'élément parent.
: une valeur qui changera l'image d'arrière-plan en fonction de sa couleur d'arrière-plan.

La valeur peut être définie comme l'un des éléments suivants (dans les démos ci-dessous, le background-colorest rouge):

`luminosity`: la luminosité de la couleur supérieure est préservée tout en utilisant la saturation et la teinte de la couleur de fond.

Démo

Voici un exemple fonctionnel de la façon dont ces valeurs sont interprétées en fonction de background-color:

Voir le mode de fusion Pen Background par CSS-Tricks (@ css-tricks) sur CodePen.

Chaînage de plusieurs modes de fusion

Chaque calque d'arrière-plan ne peut avoir qu'un seul mode de fusion, mais si nous utilisons plusieurs dégradés linéaires par exemple, chacun d'eux peut avoir son propre mode de fusion, ce qui en fait un affichage intéressant:

Voir les dégradés de stylet et le mode de fusion d'arrière-plan par CSS-Tricks (@ css-tricks) sur CodePen.

Ceci est réalisé en listant ces valeurs dans l'ordre du calque d'arrière-plan que vous souhaitez appliquer:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

Le premier dégradé linéaire a le screenmode de fusion, suivi du deuxième dégradé linéaire qui a differenceet de la première image d'arrière-plan qui lui a été lightenappliquée.