css background-blend-mode背景的混合模式

background-blend-mode

定义和用法
background-blend-mode 属性定义了背景层的混合模式（图片与颜色）

值	描述
normal	默认值。设置正常的混合模式。
multiply	正片叠底模式。
screen	滤色模式。
overlay	叠加模式。
darken	变暗模式。
lighten	变亮模式。
color-dodge	颜色减淡模式。
saturation	饱和度模式。
color	颜色模式。
luminosity	亮度模式。

例如：
下图是使用背景图实现的一张图片展示

如果想要在图片上方加一层遮罩，又不想要另外增加标签，就可以使用background-blend-mode: multiply;来实现background-image和background-color的混合使用，效果如下

代码如下：

background-image: url('img.png');
background-color: rgba(0, 0, 0, 0.5);
background-blend-mode: multiply;