isolation

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

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

Демо

Изображения, фильтры, композиция

• image-orientation
• image-rendering
• image-resolution
• object-fit
• object-position

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• conic-gradient()
• repeating-conic-gradient()
• url()
• element()
• image()
• cross-fade()

• backdrop-filter
• filter

• background-blend-mode
• isolation
• mix-blend-mode

• contain
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• container
• container-name
• container-type
• @container
• content-visibility

Синтаксис

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

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

Значения

auto

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

isolate

указывает, что должен быть создан новый контекст стека.

Значение по-умолчанию:

isolation: auto;

Применяется ко всем элементам

Спецификации

• Compositing and Blending Level 2
• Compositing and Blending Level 1

Описание и примеры

HTMLCSSРезультат

<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>

.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;
}

Комментарии