Propriété CSS isolation

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.