将透明覆盖添加到 div [重复]答案

【问题标题】：Adding transparent overlay to div [duplicate]将透明覆盖添加到 div [重复]
【发布时间】：2018-12-17 11:47:57
【问题描述】：

我正在尝试在包含图像的 div 上添加叠加层。我见过向背景图像添加叠加层的方法，但似乎无法弄清楚为什么它不适用于 div？

方法：

.featured-image {
  height: 338px;
  position: relative;
  overflow: hidden;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 2;
}

<div class="featured-image">
  <div class="overlay">
    <img src="https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338c&ext=jpg">
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

<style>
.featured-image {
  height: 338px;
  position: relative;
}

.overlay {
  position:absolute;
  top:0px;
  left:0px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 2;
}
</style>
<div class="featured-image">
  <div class="overlay"></div>
    <img src="https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338c&ext=jpg">
  
</div>

【讨论】：