-
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混合模式