CSS-Eigenschaft isolation

Die Eigenschaft isolation erlaubt es, einen neuen Stapelkontext zu erstellen. Es kann mit den Eigenschaften background-blend-mode und mix-blend-mode verwendet werden.

In CSS muss die Eigenschaft background-image oder der Inhalt des Tages <img> immer in eine isolierte Gruppe gerendert werden.
Anfangswert auto
Gilt für Alle Elemente
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax Object.style.isolation = "isolate";

Syntax

isolation: auto | isolate | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft Isolation</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>

Ein weiteres Beispiel, wo isolierter Teil schwarz ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschat Isolation</h2>
    <div class="isolation-example">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Yellow tree.">
      <div class="element">
        <h1>House</h1>
      </div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
auto Auch wenn die Eigenschaft auto eingestellt ist, wird ein Stapelkontext erstellt, wenn background-blend-mode und mix-blend-mode auf das Element angewendet werden. Das ist der Standardwert dieser Eigenschaft.
isolate Erstellt einen Stapelkontext auf einem Element und isoliert die Gruppe.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
41.0+ 36.0+ 30.0+

Übe dein Wissen

Was ist die Funktion der CSS-Eigenschaft 'isolation'?
Finden Sie das nützlich?