isolation プロパティ
isolation プロパティは、2色以上のブレンドがある場合に分離するか（ブレンドしないか）、そのままかを指定するプロパティです。
background-blend-mode または mix-blend-mode プロパティを設定している場合に機能します。
また *-blend-mode プロパティの親エレメントに isolation プロパティを指定する必要があります。
<div class="isolate" >
<p class="blend_text">この段落は色をブレンドします。</p>
</div>
<style>
.blend_text{
mix-blend-mode: difference;
}
.isolate{
isolation: isolate;
}
<style>
詳しくは Example を参照してください
上記の例は、段落を mix-blend-mode: difference; で背景色と色をブレンドする設定していますが、親エレメントで isolation: isolate; を指定することで色のブレンド機能は解消されてます。
ページ内 Index
構文(Syntax)
CSS
isolation: auto | isolate | initial | inherit;
DOM ( JavaScript )
String = object.style.isolation;
object.style.isolation="auto | isolate | initial | inherit";
値（Values）
| Value | 摘要 |
|---|---|
| auto | 初期値（default値）、ブレンドする |
| isolate | ブレンドしない（分離する） |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | auto |
| 継承（Inherited） | No |
| CSS Animation | No |
Example
isolation の例です。mix-blend-mode の設定が反映される／反映されないといった指定ができます。
ただし、mix-blend-mode の設定が設定されたエレメントの親エレメントに isolation プロパティを指定します。
以下の例は、上の段落は isolation がデフォルト、下の段落は isolate に親エレメントを指定しています。分かりにくいですが、下の段は mix-blend-mode が機能していません。
画像は「写真AC」から利用させていただきました。