Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
isolation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Dieisolation-Eigenschaft vonCSS bestimmt, ob ein Element einen neuenStacking Context erstellen muss.
Probieren Sie es aus
isolation: auto;isolation: isolate;<section> <div> <div> <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 nützlich in Verbindung mitmix-blend-mode undz-index.
Syntax
css
/* Keyword values */isolation: auto;isolation: isolate;/* Global values */isolation: inherit;isolation: initial;isolation: revert;isolation: revert-layer;isolation: unset;Dieisolation-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 Contexts für ein Element
HTML
html
<div> <div> <div>auto</div> </div> <div> <div>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
| Specification |
|---|
| Compositing and Blending Level 2 # isolation |