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é CSS isolation indique que l'élément crée un nouveau contexte d'empilement.
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é est particulièrement utile lorsqu'elle est utilisée en combinaison avec mix-blend-mode et z-index.
Syntaxe
css
/* Valeurs avec mots-clés */
isolation: auto;
isolation: isolate;
/* Valeurs globales */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
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
Forcer un nouveau contexte d'empilement pour un élément
HTML
html
<div class="grand-carre">
<div class="isolation-auto">
<div class="petit-carre">auto</div>
</div>
<div class="isolation-isolate">
<div class="petit-carre">isolate</div>
</div>
</div>
CSS
css
.isolation-auto {
isolation: auto;
}
.isolation-isolate {
isolation: isolate;
}
.grand-carre {
background-color: lime;
width: 200px;
height: 210px;
}
.petit-carre {
background-color: lime;
width: 100px;
height: 100px;
border: 1px solid black;
padding: 2px;
mix-blend-mode: difference;
}
Résultat
Spécifications
| Specification |
|---|
| Compositing and Blending Module Level 2 # isolation |
Compatibilité des navigateurs
Voir aussi
- Le type de donnée
<blend-mode> - Les propriétés
mix-blend-mode,background-blend-mode