Modes de fusion CSS-tutoriel CSS-php.cn

Modes de fusion CSS

高洛峰

Libérer： 2017-02-23 10:07:49

original

1694 Les gens l'ont consulté

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

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

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>
</head>
<body>
<p class="test1">
    <p class="in"></p>
</p>
<p class="test2">
    <p class="in"></p>
</p>

Copier après la connexion

sont transparentes, isolation: isolate se mélangera à la .test1 couleur de fond et deviendra rose. Après avoir utilisé .test2, .in est isolé de <body> et n'est pas mélangé au fond de isolation: isolate, conservant ainsi sa couleur rouge d'origine .test2<body> Puisque le rôle de <body> 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