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 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 |
Совместимость с браузерами
Loading...