下面的两个盒子，第一个只是一张图片，第二个是演示盒子。在演示盒子里，图片已经当做背景图片使用但是此刻看不到它，只看到红绿蓝线性渐变背景，原因是演示盒子使用了两个背景层，渐变背景层+图片背景层。我们知道，多层相同尺寸的背景存在相互覆盖的现象，通过background或background-image属性添加的背景层只显示最顶层背景层（即代码流中第一出现的背景层，但颜色是顶层是除外——它属于备用）。要改变这种状态，我们可以使用背景混合模式即 background-blend-mode 来实现，可通过演示盒子下方的交互按钮逐一体验各种背景混合模式的效果：

【附】

（一）CSS双层背景层的设置举例（多层同理）

background: #00ffff url('图片'); /* 颜色+图片 → 显示图片，颜色备用但会作用于 background-blend-mode 效果 */
background: linear-gradient(red,green), url('图片'); /* 渐变+图片 → 显示渐变 */
background: url('图片'), linear-gradient(red,green); /* 图片+渐变 → 显示图片 */
background: url('图片一'), url('图片二'); /* 图片+图片 → 显示图片一 */

（二）CSS的 background-blend-mode 设置举例

双背景层的情况下，background-blend-mode 将第二个出现的背景层混合到第一个背景层，第二个背景层的颜色体系与第一层背景通过特殊的乘积运算共同营造出我们一般难以预测得到的效果，换言之，background-blend-mode 背景混合模式并不直接作用于第一背景层，而是针对但并不是简单针对第二个背景层。如果有更多的背景层，则第三个背景层通过特殊算法与第一、第二背景层所形成的结果再进行乘积运算得出最终结果，第N层依此类推。举例如下：

/* 双层背景 : 作用于图片 */
background: black url('图片');
background-blend-mode: hue;

/* 三层背景 : 作用于图二、图三 */
background: url('图片一'), url('图片二'), url('图片三');
background-blend-mode: hue, screen;

（三）16种 blend-mode 值及其解释

normal： 正常模式（默认），没有混合

multiply ：正片叠加，基色和目标色复合后替换目标色。合成色至少与基色或目标色一样深。任何颜色与黑色复合得到黑色。任何颜色与白色复合保持初始颜色。

screen ：滤色，把背景色的互补色与基色混合，取结果的互补色。合成色至少和两个构成色一样浅。任何颜色与白色滤色产生白色；和黑色滤色颜色不变。效果类似于在一个屏幕上投影多个幻灯片。

overlay ：叠加，对颜色正片叠底或滤色依赖于背景色值。基色覆盖背景同时保留高光和阴影。背景色没有被替换但是与基色混合来反映背景的亮暗。

darken ：变暗，选择背景和基色的较暗部分。背景被基色中较暗的部分替换；否则，保持不变。

lighten ：变亮，选择背景和基色中较亮的部分。背景被基色中较亮的部分替换；否则，保持不变。

color-dodge ：颜色咸淡，减淡背景色来反映基色。黑色绘制的部分不变。

color-burn ：颜色加深，加深背景色来反映基色。白色绘制的部分不变。

hard-light ：强光，对颜色正片叠底或滤色依赖于基色值。效果类似于在背景上用强聚光灯照射。

soft-light ：柔光，使颜色变暗或变亮，取决于基色值。效果类似于在背景上用发散的聚光灯照射。

difference ：差值，从较浅的颜色中减去两个组成颜色的较深部分。白色绘制的部分背景反色；黑色绘制的部分不变。

exclusion ：排除，产生类似于差值模式的效果但是对比度更低。白色绘制的部分背景反色；黑色绘制的部分不变。

hue ：色相，创建于基色的色相、饱和度和亮度相同的颜色。

color ：颜色，创建色相和量度和基色相同，饱和度和背景色相同的颜色。保持背景的灰度并且对于给单色图片或图片着色很有用。

saturation ：创建饱和度与基色相同，色相和亮度与背景色相同的颜色。在背景是纯灰（没有饱和度）的区域使用这个模式不产生改变。

luminosity ：光亮或亮度，创建亮度和基色相同，色相和饱和度与背景色相同的颜色。这个模式产生的效果和Color模式相反。你可以用这个模式创建和许多网页头部图片效果一样的单色图片效果。

（四）mix-blend-mode 元素混合模式

mix-blend-mode 是元素混合模式，blend-mode 值与前述的背景混合模式完全一样。不同的是，mix-blend-mode 模式直接作用于元素，将使用了 mix-blend-mode 模式的颜色体系与其下层的颜色体系进行乘积运算得出最终混合结果。试看代码示例：

除开以上 16 种模式，还有initial初始、inherit继承和unset复原三种模式，它们不同于上述 16 中模式，一般不会独立出现，通常都依据上下文决定使用与否。

video {
	mix-blend-mode: screen;
}

这将迫使页面中的所在视频（video标签）以滤色模式（screen）和其底层综合呈现出来的颜色体系进行运算，比如，纯黑色的视频背景会被去掉。