isolation
isolation CSS 속성은 요소가 새로운 쌓임 맥락을 생성해야 하는지 지정합니다.
mix-blend-mode와 함께 사용했을 때 특히 유용합니다.
구문
/* 키워드 값 */
isolation: auto;
isolation: isolate;
/* 전역 값 */
isolation: inherit;
isolation: initial;
isolation: unset;
isolation 속성은 다음 키워드 값 중 하나를 사용해 지정합니다.
값
auto- 요소에 적용한 속성 중 새로운 쌓임 맥락을 요구하는 속성이 있을 때만 쌓임 맥락을 생성합니다.
isolate- 항상 새로운 쌓임 맥락을 생성합니다.
형식 구문
auto | (en-US) isolate
예제
<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>
.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 | Status | Comment |
|---|---|---|
| Compositing and Blending Level 1 The definition of 'Isolation' in that specification. |
Candidate Recommendation | Initial definition |
| 초기값 | auto |
|---|---|
| 적용대상 | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| 상속 | no |
| Computed value | as specified |
| Animation type | discrete |
브라우저 호환성
BCD tables only load in the browser