html - 背景与图像长度相同的图像上的文本 block

Question

我正在尝试创建一个与图像宽度相同的透明背景文本 block 。但是，如果我只是向标题添加填充，那么由于文本长度不同，有些内容可能会重叠或不够长。

目前看起来像这样: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;   
}