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月.
CSS の isolation プロパティは、要素が新しい重ね合わせコンテキストを生成する必要があるかどうかを定義します。
試してみましょう
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: revert; isolation: unset; isolation プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。
値
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | すべての要素。 SVG では、コンテナー要素、グラフィック要素、グラフィック参照要素に適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |
形式文法
isolation =
<isolation-mode>
<isolation-mode> =
auto |
isolate
例
要素で強制的に新しい重ね合わせコンテキストを生成
HTML
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
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 |