圖像與圖像的背景長度相同的文本塊

Question

我試圖創建一個具有與圖像相同寬度的透明背景的文本塊。但是，如果我只是將填充添加到標題中，則由於文本中的長度不同，有些可能會重疊或不夠長。

目前看起來是這樣的：http://puu.sh/sdBCX/994cc31da8.png

下面是相關HTML：

<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%; 
} 

乾杯！

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; 
}