normal： 正常模式（默认），没有混合
multiply ：正片叠加，基色和目标色复合后替换目标色。合成色至少与基色或目标色一样深。任何颜色与黑色复合得到黑色。任何颜色与白色复合保持初始颜色。
screen ：滤色，把背景色的互补色与基色混合，取结果的互补色。合成色至少和两个构成色一样浅。任何颜色与白色滤色产生白色；和黑色滤色颜色不变。效果类似于在一个屏幕上投影多个幻灯片。
overlay ：叠加，对颜色正片叠底或滤色依赖于背景色值。基色覆盖背景同时保留高光和阴影。背景色没有被替换但是与基色混合来反映背景的亮暗。
darken ：变暗，选择背景和基色的较暗部分。背景被基色中较暗的部分替换；否则，保持不变。
lighten ：变亮，选择背景和基色中较亮的部分。背景被基色中较亮的部分替换；否则，保持不变。
color-dodge ：颜色咸淡，减淡背景色来反映基色。黑色绘制的部分不变。
color-burn ：颜色加深，加深背景色来反映基色。白色绘制的部分不变。
hard-light ：强光，对颜色正片叠底或滤色依赖于基色值。效果类似于在背景上用强聚光灯照射。
soft-light ：柔光，使颜色变暗或变亮，取决于基色值。效果类似于在背景上用发散的聚光灯照射。
difference ：差值，从较浅的颜色中减去两个组成颜色的较深部分。白色绘制的部分背景反色；黑色绘制的部分不变。
exclusion ：排除，产生类似于差值模式的效果但是对比度更低。白色绘制的部分背景反色；黑色绘制的部分不变。
hue ：色相，创建于基色的色相、饱和度和亮度相同的颜色。
color ：颜色，创建色相和量度和基色相同，饱和度和背景色相同的颜色。保持背景的灰度并且对于给单色图片或图片着色很有用。
saturation ：创建饱和度与基色相同，色相和亮度与背景色相同的颜色。在背景是纯灰（没有饱和度）的区域使用这个模式不产生改变。
luminosity ：光亮或亮度，创建亮度和基色相同，色相和饱和度与背景色相同的颜色。这个模式产生的效果和Color模式相反。你可以用这个模式创建和许多网页头部图片效果一样的单色图片效果。

<style>
.bbox1 {
	margin: auto;
	width: 800px;
	height: 460px;
	background: url('https://638183.freep.cn/638183/t22/51/g4.jpg') no-repeat center/cover;
	position: relative; /* 父元素相对定位 */
}
.mypic {
	position: absolute; /* 子元素绝对定位 + 以下的100%宽高可确保子元素覆盖父元素 */
	width: 100%;
	height: 100%;
	mix-blend-mode: darken; /* 使用混合滤镜令元素以 darken 方式呈现 */
}
</style>

<div class="bbox1">
	<img class="mypic" src="https://638183.freep.cn/638183/t22/51/g3.jpg" alt="" />
</div>

<style>
.bbox2 {
	margin: auto;
	width: 800px;
	height: 460px;
	/* 下面设置两张背景图外加一个颜色 */
	background: 
		url('https://638183.freep.cn/638183/t22/51/g3.jpg') no-repeat center/cover,
		url('https://638183.freep.cn/638183/t22/51/g4.jpg') no-repeat center/cover,
		olive;
	background-blend-mode: darken, lighten; /*背景融合滤镜 ：darken作用于第二张图片，lighten作用于第二张图片 */
}
</style>

<div class="bbox2"></div>

/* CSS代码 ：盒子多背景设置举例 */
background-color: rgb(128,128,0); /* 背景颜色 */
background-image: url('图片地址1'), url('图片地址2');  /* 背景图片 ：两张 */
background-repeat: no-repeat, repeatX;  /* 背景重复 ：第一张不重复，第二张X轴方向重复 */
background-position: 0 0, 50% 50%; /* 背景位置 ：第一张从左上角开始，第二张居中 */
background-size: cover, 100% 100%; /* 背景尺寸 ：第一张以封面样式伸缩，第二张按盒子尺寸伸缩 */

/* 以上代码等价于如下语法糖格式 */
background: 
	url('图片地址1') no-repeat 0 0/cover,
	url('图片地址2') repeatX center/cover，
	rgb(128,128,0);

/* 多张图片做背景时如果有重叠，则只显示最第一张图片背景 */
/* 所以应考虑使用什么方法解决问题，比如使用背景融合滤镜 */
background-blend-mode: 值1, 值2; /* 值1针对第一张图片，值2针对第二张图片 */