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

結果

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

No responses yet

Write a response