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

文本块在图像上与背景相同的图像长度

1 个答案: