CSS: 幫背景圖加上一層半透明顏色的遮罩

mix a semi-transparent colored overlay with background-image

如果想要幫背景圖片加上一層半透明顏色的遮遮罩要怎麼做呢 ?

原背景圖代碼

header {
  height: 500px;
  // 透明度 0.6 的黑色半透明遮罩
  background-color: rgba(0, 0, 0, .6);
  background-image: url(bg.jpg);
  background-size: cover;
  background-position: center center;
}

結果

}

使用 background-blend-mode: multiply 混和背景圖和遮罩

header {
  height: 500px;
  // 透明度 0.6 的黑色半透明遮罩
  background-color: rgba(0, 0, 0, .6);
  // 設置背景混和模式為相乘模式
  background-blend-mode: multiply;
  background-image: url(bg.jpg);
  background-size: cover;
  background-position: center center;
}

結果