エフェクト
isolation
isolation は、要素を混ぜ方のまとまり（グループ）として切り離すかどうかを指定します。isolate にすると、中の子に書いた mix-blend-mode が、要素の外の背景とは混ざらなくなります。
構文
auto | isolateプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background-color: transparent;
isolation: isolate;
}
.box > :nth-child(2) {
mix-blend-mode: multiply;
}コントロール
isolationisolate
解説
子の mix-blend-mode がどこまで混ざるか
mix-blend-mode は、要素をその後ろに描かれているものと混ぜます。初期値の auto では、親の箱を飛び越えて、さらに後ろにあるページの背景などとも混ざります。親に isolation: isolate を書くと、親の中で描いたものだけが混ぜる相手になり、親の外とは混ざりません。
このページのプレビューでは、箱の中の円（2 番目の子）に mix-blend-mode: multiply を書いています。isolate では、円は緑の四角と重なった所だけ暗くなり、四角の外では元の青のままです。auto にすると、箱の後ろの縞や赤い円とも混ざります。
ほかのプロパティでも切り離される
重なりのまとまり（スタッキングコンテキスト）を作る要素は、isolation が auto のままでも切り離されます。たとえば opacity が 1 未満の要素、transform や filter が none 以外の要素、position と z-index を両方指定した要素などです。isolation: isolate は、見た目をほかに変えずに、このまとまりだけを作りたいときに使います。
気をつけること
isolateは新しいスタッキングコンテキストも作るので、中のz-indexの重なり順は親の中で閉じます。z-index: -1の子が親の背景の後ろに隠れないようにする、という使い方もできます。- 背景の層どうしを混ぜる
background-blend-modeは、もともと要素の中だけで混ざるので、isolationは関係ありません。 - このページのプレビューでは、後ろの模様が見えるように箱の地を透明（
background-color: transparent）にしています。点線の枠が箱の範囲です。