isolation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2020 г..
CSS-свойство isolation определяет должен ли элемент создавать новый контекст наложения stacking context.
Интерактивный пример
isolation: auto; isolation: isolate; <section class="default-example" id="default-example"> <div class="background-container"> <div id="example-element"> <img src="/shared-assets/images/examples/firefox-logo.svg" /> <p><code>mix-blend-mode: multiply;</code></p> </div> </div> </section> .background-container { background-color: #f4f460; width: 250px; } #example-element { border: 1px solid black; margin: 2em; } #example-element * { mix-blend-mode: multiply; color: #8245a3; } Это свойство особенно полезно при использовании совместно с background-blend-mode.
Синтаксис
css
/* Ключевые слова */ isolation: auto; isolation: isolate; /* Глобальные значения */ isolation: inherit; isolation: initial; isolation: unset; Свойство isolation указывается в качестве значения одного из нижеследующих ключевых слов.
Значения
Формальный синтаксис
isolation =
<isolation-mode>
<isolation-mode> =
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; } Спецификации
| Specification |
|---|
| Compositing and Blending Level 2 # isolation |
| Начальное значение | auto |
|---|---|
| Применяется к | Все элементы. В SVG это применяется к контейнерам, графическим элементам и элементам графической отсылки. |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |