Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
isolation CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Die isolation CSS-Eigenschaft bestimmt, ob ein Element einen neuen Stacking-Kontext erzeugen muss.
Probieren Sie es aus
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;
}
Diese Eigenschaft ist besonders hilfreich, wenn sie in Verbindung mit mix-blend-mode und z-index verwendet wird.
Syntax
css
/* Keyword values */
isolation: auto;
isolation: isolate;
/* Global values */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;
Die isolation-Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.
Werte
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Alle Elemente. In SVG wird er auf Containerelemente, Grafikelemente und Grafiken referenzierende Elemente angewandt. |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
isolation =
<isolation-mode>
<isolation-mode> =
auto |
isolate
Beispiele
Erzwingen eines neuen Stacking-Kontextes für ein Element
HTML
html
<div class="big-square">
<div class="isolation-auto">
<div class="small-square">auto</div>
</div>
<div class="isolation-isolate">
<div class="small-square">isolate</div>
</div>
</div>
CSS
css
.isolation-auto {
isolation: auto;
}
.isolation-isolate {
isolation: isolate;
}
.big-square {
background-color: lime;
width: 200px;
height: 210px;
}
.small-square {
background-color: lime;
width: 100px;
height: 100px;
border: 1px solid black;
padding: 2px;
mix-blend-mode: difference;
}
Ergebnis
[フレーム]
Spezifikationen
| Spezifikation |
|---|
| Compositing and Blending Module Level 2 # isolation |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.