이미지의 텍스트 블록이 이미지의 길이와 동일합니다.

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