画像と同じ長さの背景を含むテキストブロック画像

Question

画像と同じ幅の透明な背景を持つテキストブロックを作成しようとしています。しかし、ヘッダーにパディングを追加するだけで、テキストの長さが変わるために、一部が重複したり長さ不足になったりすることがあります。現在、このようになります

：

<div class="container-fluid"> 
<div class="row"> 
     <div class="artist-grid"> 
      <div class="col-lg-2"></div> 

      <div class="col-lg-2"> 
       <img id="#artistTile" src="https://dummyimage.com/300x300"> 

       <h3><span>BASSNECTAR</span></h3> 
      </div> 

      <div class="col-lg-2"> 
       <img id="#artistTile" src="https://dummyimage.com/300x300"> 

       <h3><span>DATSIK</span></h3>      
      </div> 

      <div class="col-lg-2"> 
       <img id="#artistTile" src="https://dummyimage.com/300x300"> 

       <h3><span>CHAINSMOKERS</span></h3> 
      </div> 

      <div class="col-lg-2"> 
       <img id="#artistTile" src="https://dummyimage.com/300x300"> 

       <h3><span>ZEDS DEAD</span></h3> 
      </div> 

      <div class="col-lg-2"></div> 
     </div>   
</div> 
</div> 

し、関連するCSS：

h3 { 
    position: absolute; 
    top: 244px; 
    width: 100% 
} 

h3 span { 
    color: white; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
    padding: 10px; 
} 

.artist-grid { 
    padding-top: 22px; 
} 

#artistTile { 
    position: relative; 
    max-width: 100%; 
} 

乾杯ここhttp://puu.sh/sdBCX/994cc31da8.png

は、関連するHTMLです！

Answer 1

div { 
    width: 200px; 
    height: 200px; 
    display: block; 
    position: relative; 
} 

div::after { 
    content: ""; 
    background: url(image.jpg); 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}