CSS 3ハイブリッドモード

mix-blend-modelプロパティは、要素と背景の混合モードを定義するために使用され、要素と背景ピクチャの混合でもよいし、要素と背景色の混合

でもよい.

background-blend-modeプロパティは、背景のブレンドモードを定義するために使用され、背景ピクチャと背景ピクチャのブレンドであってもよいし、背景ピクチャと背景色のブレンドであってもよい

.
isolation:isolateというcss 3属性、この属性はその意味のように、隔離の意味ですが、何を隔離しますか.mix-blend-mode要素の混合を分離するために使用されます.エレメントにブレンドモードが適用されている場合、既定では、より低い積層順のエレメントがすべてブレンドされます.文字ブレンドの例では、属性を分離しなくても文字色が白い背景をブレンドし、「words」が示すのは緑ではありませんが、ブレンドモードはある要素だけで、下に浸透しなければisolation:isolateが役に立ち、ブレンドモードの進行を遮断することを望んでいます.エレメントのセットをバックグラウンドから独立させ、エレメントのセットのみをブレンドできます.
CSS @supportsは、現在のブラウザがCSSスタイルの特徴をサポートしているかどうかをプログラマがさまざまな方法で検出することを可能にする.

// JS
if("CSS" in window && "supports" in window.CSS){    
  var support =window.CSS.supports("mix-blend-mode","difference");
  support =support?"mix-blend-mode":"no-mix-blend-mode";
  document.documentElement.className +=support;
}
// CSS
h1 {
 color:#000; 
 }
.mix-blend-mode body {
    background-image:linear-gradient(90deg,#fff 49.9%,#000 50%);
}
.mix-blend-mode h1 {
color:#fff; 
mix-blend-mode:difference;
}
//        CSS  @supports
@supports(mix-blend-mode:difference)
{
  body {
    background-image:linear-gradient(90deg,#fff 49.9%,#000 50%);
  }
  h1 {
    color:#fff;
    mix-blend-mode:difference;  
}
}

原文アドレス:CSS 3ハイブリッドモード