CSS-設置背景overlay

概念

將「下方圖片」、「上方覆蓋色塊」分為兩層(兩個div)

• 外層的背景為一張圖片
• 內層的背景為透明色彩

註：外層div會先畫，因此在畫面會呈現在下方;相反的，內層div會後畫，在畫面中會呈現蓋在上方

實作

最外層div的背景使用一張圖片(background-image屬性)，內層div的背景使用rgba的透明色彩

<div cless="section">
    <div class="white-overlay"></div>
</div>

.section{
    background-image: url("../img/education-bg.jpg");
    background-repeat: no-repeat ;
    background-size: cover;
    background-attachment: fixed;
    min-height: 1200px;
}
.white-overlay{
    background-color: rgba(255, 255, 255, 0.3);
    min-height: 1200px;
}

成果

My Project-Profile-Notes page