CSS isolation-Eigenschaft

Die isolation-Eigenschaft ermöglicht es Ihnen, einen neuen Stapelkontext zu erstellen. Sie wird häufig zusammen mit der mix-blend-mode-Eigenschaft verwendet.

Bei der Verwendung von background-blend-mode ist die isolation-Eigenschaft nicht erforderlich, da Hintergrundebenen nur miteinander und nicht mit dem dahinterliegenden Seiteninhalt verschmelzen.

INFO

In CSS wird die isolation-Eigenschaft hauptsächlich verwendet, um mix-blend-mode- oder filter-Effekte zu isolieren und zu verhindern, dass sie übergeordnete oder untergeordnete Stapelkontexte beeinflussen.

Initial Value	auto
Applies to	All elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	Object.style.isolation = "isolate";

Syntax

CSS-Syntax für isolation

css

isolation: auto | isolate | initial | inherit;

Beispiel für die isolation-Eigenschaft:

CSS-Codebeispiel für isolation

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        background-color: #ccc;
      }
      #isolation-example {
        width: 300px;
        height: 300px;
      }
      .c {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        padding: 10px;
        mix-blend-mode: difference;
      }
      #isolation-example1 {
        isolation: auto;
      }
      #isolation-example2 {
        isolation: isolate;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div id="isolation-example" class="a">
      <div id="isolation-example1">
        <div class="a c">isolation: auto;</div>
      </div>
      <div id="isolation-example2">
        <div class="a c">isolation: isolate;</div>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS isolation another

Beispiel für die isolation-Eigenschaft in Kombination mit der mix-blend-mode-Eigenschaft:

Weiteres CSS-Codebeispiel für isolation

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        background-color: #eee;
        color: #555;
        font-size: 1.1em;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .isolation-example {
        margin: 1em auto;
        width: 100%;
        max-width: 814px;
        position: relative;
      }
      img {
        width: 100%;
      }
      .isolation-example h1 {
        position: absolute;
        top: 5em;
        color: white;
        text-align: center;
        font-size: 40px;
        width: 100%;
        text-transform: uppercase;
        background-color: #000;
        padding: .5em .25em;
        mix-blend-mode: overlay;
        isolation: isolate;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div class="isolation-example">
      <img src="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Yellow tree." />
      <div class="element">
        <h1>House</h1>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Werte

Value	Description
auto	Es wird kein neuer Stapelkontext erstellt, es sei denn, andere Eigenschaften (wie mix-blend-mode oder filter) erfordern einen. Dies ist der Standardwert.
isolate	Erstellt einen Stapelkontext für ein Element und isoliert die Gruppe.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Was bewirkt die 'isolation'-Eigenschaft in CSS?

Sie ermöglicht die Spracherkennung.Sie steuert, ob ein neuer lokaler Stapelkontext erstellt werden soll.Sie ändert die Textfarbe.Sie hilft, ein Element vom Hintergrund zu isolieren und die Stapelreihenfolge einer Gruppe von Elementen zu ändern.

CSS isolation-Eigenschaft ​

Syntax ​

Beispiel für die isolation-Eigenschaft: ​

Ergebnis ​

Beispiel für die isolation-Eigenschaft in Kombination mit der mix-blend-mode-Eigenschaft: ​

Werte ​