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

Stephen Lai
2 min readMar 20, 2020

--

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;
}

結果

--

--