寫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先把圖片做好了直接給前端使用，方法是新建圖層，填充顏色，然後設定不透明度。