如何为图片添加半透明背景层并放置可见文本？z-index失效

现有方案失效的核心原因 #

• 类名打错：后两个图片容器的类名写成了image-wpapper，和第一个容器的image-wrapper对不上，样式根本匹配不上
• z-index完全不触发：所有容器没有设置非static的定位属性，写了z-index也白搭，这个属性只对带定位的元素生效
• 透明度用错地方：如果直接给图片容器加opacity，会把里面的文字也一起弄成半透明，根本没法做清晰的文字展示；而且现在没有独立的半透明层结构，层级顺序全乱的

正确的实现结构 #

从下到上按三层排布，互不干扰：

• 最底层：带背景图的容器，加position: relative当整个块的定位基准
• 中间层：独立的半透明蒙层，铺满整个容器，设置半透明黑底
• 最上层：文本块，设置更高的层级，完全不透明，保证清晰可见

修正后的完整代码 #

HTML部分

<main>
  <div class="projects-wrapper first-row">
    <div class="image-wrapper">
      <div class="text-description">
        Concert hall <span>in New York</span>
      </div>
      <div class="text-category">
        Architecture
      </div>
    </div>
    <div class="image-wrapper">
      <div class="text-description">
        Modern bedroom <span>in Gorizia</span>
      </div>
      <div class="text-category">
        Interior
      </div>              
    </div>
    <div class="image-wrapper">
      <div class="text-description">
        Modern hotel <span>in London</span>
      </div>
      <div class="text-category">
        Architecture
      </div>                            
    </div>
  </div>
</main>

CSS部分

main{
  border: 2px solid red;
  width: 100%;
  height: 100vh;
}
.projects-wrapper{
  border: 2px solid black;
  width: 100%;
  height: 50vh;
  display: flex;
}
.projects-wrapper div{
  border: 2px solid green;
  flex-grow: 1;
  position: relative; /* 关键：触发z-index的基础定位 */
  overflow: hidden; /* 避免蒙层溢出容器边界 */
}
/* 伪元素做独立半透明蒙层，不额外加冗余DOM */
.projects-wrapper div::after{
  content: '';
  position: absolute;
  inset: 0; /* 铺满整个父容器 */
  background: rgba(0,0,0,0.5); /* 半透明黑底，数值可以自己调透明度 */
  z-index: 1; /* 蒙层在图片上方、文本下方 */
}
.projects-wrapper div.text-description{
  border: 2px solid yellow;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  color: white;
  text-transform: uppercase;
  position: relative; /* 文本加定位，才能生效z-index */
  z-index: 2; /* 文本层级比蒙层高，浮在最上面 */
  /* 可选：让文本垂直水平居中 */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.projects-wrapper div.text-description span{
  display: block;
}
.projects-wrapper div.text-category{
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: white;
  z-index: 2;
}
.first-row div:first-child{
  background-image: url(../assets/concert-hall.jpg);
  background-size: cover;
  background-position: center;
}
.first-row div:nth-child(2){
  background-image: url(../assets/bedroom-2.jpg);
  background-size: cover;
  background-position: center;
}
.first-row div:last-child{
  background-image: url(../assets/hotel.jpg);
  background-size: cover;
  background-position: center;
}

补充提醒：别再直接用opacity给图片做半透明效果了，这个属性的作用范围是整个容器，会把里面的所有内容都变透，完全达不到文字清晰的要求。

内容的提问来源于stack exchange，提问作者user