css图片遮罩层

html结构:

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

css样式:

<style>     
.wrap {       
    position: relative;       
    height: 88px;       
    width: 98px;       
    background: url(./cover.png) no-repeat;       
    background-size: 100%;     
}     
.wrap:after {       
    content: "售罄";       
    position:absolute;       
    top:0;       
    left:0;       
    height: 100%;       
    width: 100%;       
    background-color: #b2b2b2;       
    opacity: 0.8;       
    display: flex;       
    justify-content: center;       
    align-items: center;       
    color: #fff;     
 }   
</style>