isolation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
시도해 보기
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 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 |