CSS-Eigenschaft isolation

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.