我创建了一个带有背景图像的正方形，并用额外的 div 覆盖它，在该 div 之上我想要文本。现在我想我可以通过使用它来解决它z-index，position: relative但它没有用。目标是将文本置于黑色覆盖层之上。
请记住，我不想降低文本的不透明度。
这是我的代码，有关演示，请参阅此处的JSFIDDLE
.image-holder {
width: 275px;
height: 274px;
display: inline-block;
position: relative;
z-index: 13;
background-color: blue;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
h2.offer-image-title {
color: red;
border: 0;
text-align: center;
font-size: 36px;
display: inline-block;
padding: 0;
margin: 0;
padding-top: 32%;
position: relative;
z-index: 15;
}
.offer-image {
width: 100%;
height: 100%;
position: relative;
}
.offer-1 {
background-image: url(http://www.wnd.com/files/2015/03/chuck_norris300x300-275x275.jpg);
}
.overlay-black {
background-color: black;
opacity: 0.5;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 14;
}<div class="image-holder">
<div class="offer-image offer-1">
<div class="overlay-black"></div>
<h2 class="offer-image-title">Chuck Norris</h2>
</div>
</div>您可以将linear-gradient()+rgba()与背景图像一起用于叠加层，并使用 flexbox 将文本居中。
.image-holder {
width: 200px;
height: 200px;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(https://i.stack.imgur.com/rFpk9.jpg);
background-size: 100%, cover;
display: flex;
justify-content: center;
align-items: center;
color: white;
}<div class="image-holder">
<h2>Chuck Norris</h2>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句