CSS3-混合模式

概述

---

引例
通过 CSS 的 blend mode使背景图和背景色之间发生了关乎于色彩的一种的融合

混合模式

• 混合使值叠加在一起的元素之间的一种色彩混合呈现的模式
• 混合模式来源于关于色彩叠加一起的各种不同计算方法，效果可参见PS中的图层混合
• 通过CSS的混合模式的设置，可以直接实现图片融合、文字融合等丰富的视觉效果，从而减少从前必须用处理图片的方法实现的工作
• 较新的CSS3新增内容，浏览器支持度比较低，应该还在逐渐完善中

设置元素的混合模式效果可参考PS中的图层混合模式

• 作用域两个或两个以上对象的叠加设定的是叠加的不同混合方式
• 混合效果形成区域使针对的叠加重合部分

相关属性

• 背景混合：background-mode
  元素背景混合
• 元素混合：mix-blend-mode
• 独立隔离：isolation

属性的值
normal 默认 正常
multiply 正常叠片
darken 变暗
color-burn 颜色加深
overlay 叠加
hard-light 强光
hue 色相
color 颜色
exclusion 排除
screen 滤色
lighten 变亮
color-dodge 颜色减淡
difference 差值
soft-light 柔光
saturation 饱和度
luminosity 亮度（明度）

背景混合模式

background-mode

---

① 仅针对元素自身（不会与父级元素背景色进行混合）
② 多重背景每个背景层的颜色都会与下方背景层及元素的背景色进行混合
③ 一个背景层只能使用一种混合模式来定义
④多重背景下，每一个背景层都可以定义自身的混合模式（用逗号隔开），但会受到下方背景层的影响

实例 图片的翻转混合

元素混合模式

mix-blend-mode

---

用于元素本身与下方元素的混合模式
→元素本身包括包括元素的内容及背景，引入默认包括里面的子级元素
→不同浏览器可能对body的混合解释不同

实例 多彩文字叠加

• CSS实现大小写的改变
• letter-specing 设置文字重叠

独立隔离模式

isolation

---

隔离具有混合模式的元素
元素应用混合模式，默认情况下，会混合z轴上所有层叠顺序比其低的混合元素
当我们希望混合模式只到某一个元素或某一组元素时，可以使用该属性。

该属性一共有三个值，但是一般只会用到isolate一个，因为应用这个属性的目的本身就是想要隔离。