This page was translated from English by the community.Learn more and join the MDN Web Docs community.
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> <div> <div> <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> <div> <div>auto</div> </div> <div> <div>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 |