CSS3混合模式

• mix-blend-model属性用来定义元素与背景的混合模式，可以是元素与背景图片的混合，也可以是元素与背景色的混合

• background-blend-mode属性用来定义背景的混合模式，可以是背景图片与背景图片的混合，也可以是背景图片和背景色的混合

isolation: isolate这个css3属性，这个属性正如其语义，就是隔离的意思，那隔离什么呢？是用来隔离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;  
}
}

原文地址：CSS3混合模式