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ë 1ì.
isolation CSS ìì±ì ììê° ìë¡ì´ ìì 맥ë½ì ìì±í´ì¼ íëì§ ì§ì í©ëë¤.
ìëí´ ë³´ê¸°
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;
}
mix-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 Module Level 2 # isolation |
| ì´ê¸°ê° | auto |
|---|---|
| ì ì©ëì | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| ìì | no |
| ê³ì° ê° | as specified |
| Animation type | Not animatable |