isolation
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since janeiro de 2020.
A propriedade CSS isolation define se o elemento deve criar um novo stacking context.
css
/* Keyword values */
isolation: auto;
isolation: isolate;
/* Global values */
isolation: inherit;
isolation: initial;
isolation: unset;
É especialmente útil em conjunto com background-blend-mode que mistura os fundos em um dado stacking context: ela permite isolar grupos de elementos dos seus fundos e misturar as suas cores.
| Initial value | auto |
|---|---|
| Aplica-se a | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |
Sintaxe
Uma das palavras-chave listadas abaixo.
Valores
Sintaxe formal
isolation =
<isolation-mode>
<isolation-mode> =
auto |
isolate
Exemplos
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;
}
Especificações
| Specification |
|---|
| Compositing and Blending Level 2 # isolation |
Compatibilidade com navegadores
Loading…