如何在img元素上方叠加带背景的div且避免背景覆盖整张图片

问题原因 #

你当前设置背景色后覆盖整张图片，是因为.text-box配置了width: 100%和height: 100%，会完全占满外层容器的尺寸，给它加纯色背景自然会覆盖下方整张图片。根据你要实现的效果，有两种常用解决方案：

方案1：仅文字区域显示背景（仅文字周围有背景，其余位置露出原图） #

只需要给内部的h4标签加背景样式即可，不需要修改外层布局：

h4 {
  display: inline-block;
  font-size: 20px;
  /* 新增样式 */
  background: rgba(0, 0, 0, 0.7); /* 可自定义颜色，最后一位是透明度0-1 */
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px; /* 可选，加圆角效果 */
}

方案2：整张图片加半透明遮罩背景（整个图片上方蒙一层半透背景，文字在最上层） #

给.text-box加带透明度的rgba背景即可，不要用纯不透明色：

.text-box {
   position: absolute;    
   height: 100%;
   text-align: center;    
   width: 100%;
   /* 新增样式 */
   background: rgba(255, 255, 255, 0.3); /* 可自定义颜色和透明度 */
}

完整可运行代码示例 #

<div class="containerBox">
  <div class="text-box">
    <h4> Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Oragnic Tea</h4>
  </div>
  <img class="img-responsive" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg">
</div>

.containerBox {
  position: relative;
  display: inline-block;
}
.text-box {
   position: absolute;    
   height: 100%;
   text-align: center;    
   width: 100%;
   /* 如果用方案2就加下面这行，用方案1就删掉 */
   background: rgba(255, 255, 255, 0.3);
}
.text-box:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
h4 {
  display: inline-block;
  font-size: 20px;
  /* 如果用方案1就加下面几行，用方案2就按需调整 */
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px 20px;
}
img {
  display: block;
  max-width: 100%;
}

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