1、有关混和方式
熟习PS的人都应当了解混和方式：
SVG和Canvas中也是有混和方式，实质上全是1样的。
下面是1些普遍的混和方式的优化算法：
维基上也是有表明。有兴趣爱好能够掌握下。
本文內容则简易详细介绍CSS3出現了两个与混和方式相关的特性，mix-blend-mode和background-blend-mode.
2、CSS3 mix-blend-mode
最先，要了解”blend-mode”便是混和方式的意思。那mix, 恩，我也不知道道为何取名为mix, 将会是该特性不但能够功效于HTML，还能够功效于SVG，果断叫mix1起捋过来。该CSS特性功效是让元素內容和这个元素的情况和下面的元素产生“混和”。
适配性以下：
可见，近期的Chrome和FireFox访问器都早已适用优良，并且不用应用独享前缀。
其适用的值许多，中英文对比以下：
mix-blend-mode: normal; //一切正常 mix-blend-mode: multiply; //正片叠底 mix-blend-mode: screen; //滤色 mix-blend-mode: overlay; //叠加 mix-blend-mode: darken; //变暗 mix-blend-mode: lighten; //变亮 mix-blend-mode: color-dodge; //色调减淡 mix-blend-mode: color-burn; //色调加深 mix-blend-mode: hard-light; //强光 mix-blend-mode: soft-light; //柔光 mix-blend-mode: difference; //差值 mix-blend-mode: exclusion; //清除 mix-blend-mode: hue; //色相 mix-blend-mode: saturation; //饱和状态度 mix-blend-mode: color; //色调 mix-blend-mode: luminosity; //亮度 mix-blend-mode: initial; //原始 mix-blend-mode: inherit; //承继 mix-blend-mode: unset; //还原
后边3个酱油气场浓厚，PS中未曾出現，大伙儿能够疏忽。
假如你想体验各个混和方式的功效主要表现，您能够狠狠地址击这里：CSS3 mix-blend-mode混和方式Demo
比如说挑选叠加，则文本和后边的內容的混和实际效果便是这样：
mix-blend-mode为大家完成1些文本殊效又出示了更宽阔的思路了。
3、CSS3 background-blend-mode
background-blend-mode这个要更好了解1点，情况的混和方式。能够是情况照片见的混和，还可以是情况照片和情况色的混和。
适配性以下：
适用的特性值跟上面1样，就不反复展现。
假如你想体验各个混和方式的功效主要表现，您能够狠狠地址击这里：CSS3 background-blend-mode混和方式Demo
比如，挑选1个普遍的multiply正片叠底，結果两个妹子合体了：
必须留意的是，只能是background特性中的情况照片和色调混和，并且只能在1个background特性中。
CSS3 backgrounds多情况IE9+访问器就刚开始适用了。因而，你想混和多图，便是要逗号，1个1个写在background特性中便可以了，比如本Demo的两个妹子：
.box {
background: url(mm1.jpg) no-repeat center, url(mm2.jpg) no-repeat center;
}
总结
以上所述是网编给大伙儿详细介绍的CSS3混和方式mix-blend-mode/background-blend-mode简介，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！