CSS混合模式
背景混合模式
什么是Blend model？
看看Wiki上是怎么说的：
Blend modes (alternatively blending modes[1] or mixing modes[2]) in digital image editing and computer graphics are used to determine how two layers are blended with each other.The default blend mode in most applications is simply to obscure the lower layer by covering it with whatever is present in the top layer (see alpha compositing); because each pixel has numerical values, there also are many other ways to blend two layers.
译文：数字图像编辑和计算机图形学中的混合模式（又称混合模式[1]或混合模式[2]）是用来决定两个图层如何相互混合的。在大多数应用程序中，默认的混合模式是简单地用顶层中存在的任何东西来掩盖低层（见阿尔法合成）；因为每个像素都有数值，也有许多其他方法来混合两个层。
大部分主要浏览器已经支持多数混合模式了，当然IE和Edge浏览器是个例外。Safari浏览器也不支持复合效果混合模式，必要的时候可以使用特性查询并提供回退处理。可以在Can I Use网站中检索CSS background-blend-mode查看最新的浏览器支持情况。
图片素材：
混合两张背景图片
<html>
<head>
<style>
.blend {
min-height: 400px;
background-image: url(bear.jpg), url(bear.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: -30vw, 30vw;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div class="blend"></div>
</body>
</html>
实现效果
为图片着色
<html>
<head>
<style>
.blend {
min-height: 400px;
background-image: url(bear.jpg);
background-color: #148; /*蓝色背景*/
background-size: cover;
background-repeat: no-repeat;
background-position: center; /*使用明度混合模式*/
background-blend-mode: luminosity;
}
</style>
</head>
<body>
<div class="blend"></div>
</body>
</html>
明度混合模式将前景层（大熊图片）的明度，与背景层（蓝色背景色图层）的色相和饱和度混合。也就是说，最终是完全使用背景色图层的颜色，但是明暗程度来自大熊图片。
实现效果
CSS支持的15中混合模式：
为图片添加纹理
图片素材
<html>
<head>
<style>
.blend {
min-height: 400px;
background-image: url("scratches.png"), url("bear.jpg"); /*将纹理图片覆盖在主图片之上*/
background-size: 200px, cover; /*每200px平铺一张纹理图片*/
background-repeat: repeat, no-repeat;
background-position: center center;
background-blend-mode: soft-light; /*使用柔光混合模式*/
}
</style>
</head>
<body>
<div class="blend"></div>
</body>
</html>
实现效果
使用融合模式
<!doctype>
<head>
<style type="text/css">
.blend {
background-image: url("bear.jpg");
background-size: cover;
background-position: center;
padding: 15em 0 1em;
}
.blend > h1 {
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 6rem;
text-align: center;
mix-blend-mode: hard-light;
background-color: #c33;
color: #808080;
border: 0.1em solid #ccc;
border-width: 0.1em 0;
}
</style>
</head>
<body>
<div class="blend">
<h1>Ursa Major</h1>
</div>
</body>
实现效果
背景混合模式参考资料：
深入理解CSS background-blend-mode的作用机制
