一個(gè)div同時(shí)設(shè)置background-color和background-image的話姆蘸，color是處于img層下方的墩莫，無(wú)法實(shí)現(xiàn)遮罩效果，所以需要再創(chuàng)建一個(gè)div作為其子div,然后設(shè)置子div的背景顏色逞敷，介紹兩種方法：一個(gè)div同時(shí)設(shè)置background-color和background-image的話狂秦，color是處于img層下方的，無(wú)法實(shí)現(xiàn)遮罩效果推捐，所以需要再創(chuàng)建一個(gè)div作為其子div,然后設(shè)置子div的背景顏色故痊，介紹兩種方法：
第一種，代碼如下：
css:
.wrap{
????position: relative;
????background:url(i/pic4.jpg) no-repeat;
????-webkit-background-size:100%;
????background-size:100%;
}
.warp-mask{
????height:100%;
????width:100%;
????background:rgba(0,0,0,.4);
}
html：
<div class="wrap">
? ? <div class="wrap-mask"></div>
</div>
第二種，通過(guò)after偽元素設(shè)置愕秫，代碼如下：
css:
.wrap{
? ? position: relative;
? ? background: url(i/pic4.jpg) no-repeat;
? ? -webkit-background-size: 100%;
? ? background-size: 100%;
}
.wrap-mask:after{
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? content: "";
? ? background-color: yellow;
? ? opacity: 0.2;
? ? z-index: 1;
? ? width: 100%;
? ? height: 100%;
}
html:
<div class="wrap">
? ? <div class="wrap-mask"></div>
</div>
