Propriété CSS isolation

La propriété isolation permet de créer un nouveau contexte d'empilement. Elle peut être utilisée avec les propriétés background-blend-mode et mix-blend-mode.

En CSS, background-image ou le contenu d'un <img> doit toujours être rendu en un groupe isolé.
Valeur initiale auto
Appliquée à Tous les éléments.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM Object.style.isolation = "isolate";

Syntaxe

isolation: auto | isolate | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété 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>

Un autre exemple, dans lequel la partie isolée est noire:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété 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>

Valeurs

Valeur Description
auto Même si la propriété est définie à auto, un contexte d'empilement est créé au cas où background-blend-mode et mix-blend-mode sont appliquées à l'élément. C'est la valeur initiale de cette propriété.
isolate Crée un contexte d'empilement sur un élément, et isole le groupe.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

41.0+ 36.0+ 30.0+


Trouvez-vous cela utile?

Articles Associées