CSS で background-color を使用して背景画像にマスク効果を追加する 2 つの方法

。包む{
    位置: 相対的;
    背景: url(i/pic4.jpg) 繰り返しなし;
    -webkit 背景サイズ: 100%;
    背景サイズ: 100%;
}
.warp-mask{
    高さ:100%;
    幅:100%;
    背景: rgba(0,0,0,.4);
}

<div class="wrap">
    <div class="wrap-mask"></div>
</div>

。包む{
    位置: 相対的;
    背景: url(i/pic4.jpg) 繰り返しなし;
    -webkit 背景サイズ: 100%;
    背景サイズ: 100%;
}
.wrap-mask:after{
    位置: 絶対;
    上: 0;
    左: 0;
    コンテンツ： "";
    背景色: 黄色;
    不透明度: 0.2;
    zインデックス: 1;
    幅: 100%;
    高さ: 100%;
}

<div class="wrap">
    <div class="wrap-mask"></div>
</div>