Modes de fusion CSS

Mots précédents

  Le contexte en cascade z-index ne résout que le problème de deux éléments couvrant lequel est le plus proche de l'utilisateur. Le mode de fusion CSS traite de la question de savoir comment mélanger les parties couvrantes de deux éléments. Si vous connaissez Photoshop, vous devriez être familier avec ce phénomène. CSS3 a deux propriétés liées aux modes de fusion : mix-blend-mode et background-blend-mode Cet article présentera en détail les modes de fusion CSS

Element Mix

Element Mix- blend. -mode s'applique au mélange entre deux éléments

mix-blend-mode

Valeur initiale : normal

S'applique à : tous les éléments

Héritage : Aucun

Valeurs : normal | multiplier l'écran | superposer | éclaircir la lumière) | | lumière douce (lumière douce) | différence (différence) | teinte (teinte) ) | saturation | luminosité
| initial | non défini

android4.4-Non pris en charge, Safari et IOS doivent ajouter le préfixe -webkit-

  [Note] Cet élément créera un contexte en cascade, l'attribut z-index est valide

Mélange d'arrière-plan

  Background Blending background-blend-mode s'applique à plusieurs images d'arrière-plan d'un élément ou à un mélange entre des images d'arrière-plan et des couleurs d'arrière-plan

background-blend-mode

Valeur initiale : normale

s'applique à : tous les éléments

héritage : aucun

valeurs : écran normal multiplié | Superposition | assombrir | éclaircir | couleur -esquive | couleur-lumière | lumière douce | différence (différence) | teinte (teinte) | couleur (couleur) | initial) | hériter (hériter) | unset (restaurer)

Compatibilité : navigateur IE, android4.4-non pris en charge, safari et IOS doivent ajouter le préfixe -webkit-

Isolation

La fonction d'isolation est de créer un contexte d'empilement, principalement utilisé avec l'attribut mix-blend-mode pour appliquer le mode de fusion uniquement à un certain élément ou un certain groupe d'éléments

isolation

Valeur initiale : auto

S'applique à : tous les éléments

Héritage : Aucun

Valeur : auto isolate (crée un nouveau contexte d'empilement) | initial | unset

 Si vous n'utilisez pas

pour créer un contexte d'empilement, puisque les couleurs d'arrière-plan de

<style>
body{background-color: gray;}
.test1,.test2{display: inline-block;width: 100px;height: 100px;border:1px solid black;}
.test2{isolation: isolate;}
.in{width: 50px;height: 50px;background-color: red;mix-blend-mode: screen;}
</style>


<p>
    </p><p></p>

<p>
    </p><p></p>

et

sont transparentes, isolation: isolate se mélangera à la .test1 couleur de fond et deviendra rose. Après avoir utilisé .test2, .in est isolé de et n'est pas mélangé au fond de isolation: isolate, conservant ainsi sa couleur rouge d'origine .test2 Puisque le rôle de est de créer un contexte d'empilement, Ainsi, tant qu'un contexte d'empilement peut être créé, l'effet d'isolation peut être obtenu. Par conséquent, de la même manière, les styles relatifs, de filtre et autres peuvent également obtenir des effets similaires

Pour plus d'articles sur le mode mixte CSS, veuillez faire attention au site Web PHP chinois ! isolation: isolate