Propiedad CSS isolation

La propiedad isolation te permite crear un nuevo contexto de apilamiento. Comúnmente se usa junto con la propiedad mix-blend-mode.

Al usar background-blend-mode, no se necesita la propiedad isolation porque las capas de fondo solo se mezclan entre sí, no con el contenido de la página detrás de ellas.

INFO

En CSS, la propiedad isolation se utiliza principalmente para aislar los efectos de mix-blend-mode o filter, evitando que afecten a los contextos de apilamiento padre o hijo.

Valor inicial	auto
Se aplica a	Todos los elementos.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	Object.style.isolation = "isolate";

Sintaxis

Sintaxis de CSS isolation

css

isolation: auto | isolate | initial | inherit;

Ejemplo de la propiedad isolation:

Ejemplo de código de CSS 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 »

Resultado

CSS isolation another

Ejemplo de la propiedad isolation con la propiedad mix-blend-mode:

Otro ejemplo de código de CSS 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://es.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 »

Valores

Valor	Descripción
auto	No se crea un nuevo contexto de apilamiento a menos que otras propiedades (como mix-blend-mode o filter) lo requieran. Este es el valor predeterminado.
isolate	Crea un contexto de apilamiento en un elemento y aísla el grupo.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad 'isolation' en CSS?

Habilita el reconocimiento de voz.Controla si se debe crear un nuevo contexto de apilamiento local.Cambia el color del texto.Ayuda a aislar un elemento de su fondo y cambiar el orden de apilamiento de un conjunto de elementos.

Propiedad CSS isolation ​

Sintaxis ​

Ejemplo de la propiedad isolation: ​

Resultado ​

Ejemplo de la propiedad isolation con la propiedad mix-blend-mode: ​

Valores ​