CSS свойство isolation

Свойство isolation позволяет создать новый контекст наложения. Обычно оно используется вместе со свойством mix-blend-mode.

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

INFO

В CSS свойство isolation в основном используется для изоляции эффектов mix-blend-mode или filter, предотвращая их влияние на родительские или дочерние контексты наложения.

Начальное значение	auto
Применяется к	Ко всем элементам.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS3
Синтаксис DOM	Object.style.isolation = "isolate";

Синтаксис

Синтаксис CSS isolation

css

isolation: auto | isolate | initial | inherit;

Пример использования свойства isolation:

Пример кода 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 »

Результат

CSS isolation another

Пример использования свойства isolation со свойством mix-blend-mode:

Другой пример кода 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://ru.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 »

Значения

Значение	Описание
auto	Новый контекст наложения не создаётся, если только другие свойства (например, mix-blend-mode или filter) не требуют этого. Это значение по умолчанию.
isolate	Создаёт контекст наложения для элемента и изолирует группу.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Что делает свойство 'isolation' в CSS?

Включает распознавание речи.Определяет, следует ли создавать новый локальный контекст наложения.Изменяет цвет текста.Помогает изолировать элемент от фона и изменить порядок наложения группы элементов.

CSS свойство isolation ​

Синтаксис ​

Пример использования свойства isolation: ​

Результат ​

Пример использования свойства isolation со свойством mix-blend-mode: ​

Значения ​