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년 1월.
시도해 보기
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 |
브라우저 호환성
Enable JavaScript to view this browser compatibility table.