CSS 背景图片和背景颜色融合，以及多张背景图片融合显示

写CSS的时候会遇到这样一个需求，要求给背景图片加上一个“遮罩层”，看起来更符合页面的整体风格。

可以用背景图片和背景颜色融合来解决。

通常我们这样写：

          .bgDiv {

                       background:rgba(255, 0, 0, 0.1), url(...);

           }

这样的写法的问题是，只有在图片覆盖不到的区域才能看到背景颜色，或者png图片的透明部分，才能看到。

这样达不到我们的要求，就需要另外的方法解决了，添加background的一个属性，background-blend-mode:multiply;

background-blend-mode参考如下：

mix-blend-mode: normal;          正常
mix-blend-mode: multiply;        正片叠底
mix-blend-mode: screen;          滤色
mix-blend-mode: overlay;         叠加
mix-blend-mode: darken;          变暗
mix-blend-mode: lighten;         变亮
mix-blend-mode: color-dodge;     颜色减淡
mix-blend-mode: color-burn;      颜色加深
mix-blend-mode: hard-light;      强光
mix-blend-mode: soft-light;      柔光
mix-blend-mode: difference;      差值
mix-blend-mode: exclusion;       排除
mix-blend-mode: hue;             色相
mix-blend-mode: saturation;      饱和度
mix-blend-mode: color;           颜色
mix-blend-mode: luminosity;      亮度

mix-blend-mode: initial;         初始
mix-blend-mode: inherit;         继承
mix-blend-mode: unset;           复原

/* One value */
background-blend-mode: normal;

/* Two values, one per background */
background-blend-mode: darken, luminosity;

/* Global values */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

参考档案：https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

除了这个还有另外一个方法，利用css背景渐变：

.bgDiv {

                       background:linear-gradient(bottom, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1)), url(...);

           }

很奇怪，但是有用。

当然还有方法就是用PS先把图片做好了直接给前端使用，方法是新建图层，填充颜色，然后设置不透明度。