isolation CSS

Свойство isolation определяет, должен ли элемент создать новый контекст стека.

Это особенно полезно в сочетании с background-blend-mode, которые только смешивают фон в заданном контексте стекирования: он позволяет изолировать группы элементов от их более глубокого фона и смешать их фоновый цвет вместе.

Свойство **`isolation`** определяет, должен ли элемент создать новый контекст стека. Это особенно полезно в сочетании с [`background-blend-mode`](/css/background-blend-mode/), которые только смешивают фон в заданном контексте стекирования: он позволяет изолировать группы элементов от их более глубокого фона и смешать их фоновый цвет вместе.
Значение по умолчанию:

auto

Значение по умолчанию:
`auto`
Наследуется:
Нет
Применяется:

ко всем элементам

Применяется:
ко всем элементам
Анимируется:
Нет
Спецификации:
Спецификации:
* [Compositing and Blending Level 1](https://drafts.fxtf.org/compositing-1/#isolation)

Синтаксис

/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: unset;

Синтаксис

/* Keyword values */ isolation: auto; isolation: isolate; /* Global values */ isolation: inherit; isolation: initial; isolation: unset;

Значения

  • auto — указывает, что новый контекст стека должен быть создан только в том случае, если это требует свойство, применяемое к элементу.
  • isolate — указывает, что должен быть создан новый контекст стека.

Значения

* `auto` -- указывает, что новый контекст стека должен быть создан только в том случае, если это требует свойство, применяемое к элементу. * `isolate` -- указывает, что должен быть создан новый контекст стека.

Примеры

HTML

<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>

CSS

.a {
  background-color: rgb(0,255,0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}

Результат

Пример работы свойства isolate
Пример работы свойства isolate

Примеры

HTML <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> CSS .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } Результат ![Пример работы свойства isolate](/workspace/uploads/css/isolate.png)

Содержание

  • Синтаксис
      /* Keyword values */ isolation: auto; isolation: isolate; /* Global values */ isolation: inherit; isolation: initial; isolation: unset;
  • Значения
    • Примеры
        HTML <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> CSS .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } Результат ![Пример работы свойства isolate](/workspace/uploads/css/isolate.png)

    В начало