isolation
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La propriété isolation indique que l'élément crée un nouveau contexte d'empilement (stacking context).
Exemple interactif
isolation: auto;
isolation: isolate;
<section class="default-example" id="default-example">
<div class="background-container">
<div id="example-element">
<img src="/shared-assets/images/examples/firefox-logo.svg" />
<p><code>mix-blend-mode: multiply;</code></p>
</div>
</div>
</section>
.background-container {
background-color: #f4f460;
width: 250px;
}
#example-element {
border: 1px solid black;
margin: 2em;
}
#example-element * {
mix-blend-mode: multiply;
color: #8245a3;
}
Cette propriété s'avère particulièrement utile avec mix-blend-mode afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.
Syntaxe
css
/* Valeurs avec mots-clés */
isolation: auto;
isolation: isolate;
/* Valeurs globales */
isolation: inherit;
isolation: initial;
isolation: unset;
La propriété isolation est définie avec l'un des mots-clés suivants.
Valeurs
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | Tous les éléments. En SVG, cela s'applique aux éléments de conteneurs, aux éléments graphiques et aux éléments faisant référence à des éléments graphiques. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |
Syntaxe formelle
isolation =
<isolation-mode>
<isolation-mode> =
auto |
isolate
Exemples
CSS
css
.a {
background-color: rgb(0, 255, 0);
}
#b {
width: 200px;
height: 210px;
}
.c {
width: 100px;
height: 100px;
border: 1px solid black;
padding: 2px;
mix-blend-mode: difference;
}
#d {
isolation: auto;
}
#e {
isolation: isolate;
}
HTML
html
<div id="b" class="a">
<div id="d">
<div class="a c">auto</div>
</div>
<div id="e">
<div class="a c">isolate</div>
</div>
</div>
Résultat
Spécifications
| Specification |
|---|
| Compositing and Blending Level 2 # isolation |
Compatibilité des navigateurs
Chargement…