背景画像のimgタグの画像をカバーする命令はありますか？

Question

これは、クラスliの背景画像に挿入されました。

内部には、imgタグがあります。

liクラスタグの背景イメージは、どのようにそれを上回っていますか？

<style> 
.wrap { 
    width: 100%; 
    overflow: hidden; 
    position: relative; 
    height: 625px; 
} 
.ul-wrap { 
    width: auto; 
    position: relative; 
} 
li.full-image.guest_bulr { 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQoU2NkIAJ4e3sbMxJSB1K0devWs3gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQBteCUf8jBb4wAAAABJRU5ErkJggg==); 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    width: 980px; 
    height: 625px; 
    z-index: 999; 
    display: none; 
    background-color: rgba(21, 18, 18, 0.9); 
    zoom: 1; 
    background-size: cover; 
} 

.wrap img { 
    max-width: 100%; 
    display: block; 
} 

</style> 

<div class="wrap"> 
    <ul class="ul-wrap"> 
     <li> 
      <img src="http://placehold.it/980x625/?text=image-1st" alt="image" class="first-img"> 
     </li> 
    </ul> 
</div> 

Answer 1

.first-imgを使用してください。 作業例を参照してください。

.wrap { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
    height: 625px; 
 
} 
 
.ul-wrap { 
 
    width: auto; 
 
    position: relative; 
 
} 
 

 
.ul-wrap li { 
 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQoU2NkIAJ4e3sbMxJSB1K0devWs3gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQBteCUf8jBb4wAAAABJRU5ErkJggg==); 
 
    display: block; 
 
    position: relative; 
 
    width: 980px; 
 
    height: 625px; 
 
    background-size: cover; 
 
    background-color: rgba(255, 0, 0, 0.4); 
 
} 
 

 
.wrap img { 
 
    max-width: 100%; 
 
} 
 

 
.first-img { 
 
    position: relative; 
 
    z-index: -1; 
 
}

<div class="wrap"> 
 
    <ul class="ul-wrap"> 
 
     <li> 
 
      <img src="http://placehold.it/980x625/?text=image-1st" alt="image" class="first-img"> 
 
     </li> 
 
    </ul> 
 
</div>