html - 覆盖除 img 之外的所有内容

Question

我正在尝试在图像上添加叠加层。一切正常，除了叠加层不会覆盖容器的图像部分。我增加了 z-index 并将 bottom、left、right 等添加到 0。

有没有人看到我做错了什么？我很难过。

.pdfWrap {
  border-top: 1px solid #CFCFCF;
  border-right: 1px solid #CFCFCF;
  border-bottom: 1px solid #CFCFCF;
  border-radius: 2px;
  position: relative;
  height: 260px;
  width: 25%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  transition-delay: 0.10s;
  -webkit-transition-delay: 0.10s;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pdfWrap .overlay {
  z-index: 11111;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  cursor: pointer;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
}

.pdfWrap:hover .overlay {
  background-color: rgba(0, 0, 0, 0.6);
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  transition-delay: 0.10s;
  -webkit-transition-delay: 0.10s;
  z-index: 10;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  cursor: pointer;
  display: block;
}

.pdfBox img {
  width: 60%;
  height: auto;
  margin: 0 auto;
  background: transparent;
}

<div class="pdfWrap">
  <div class="overlay">
    <div class=" pdfBox total-center">
      <img src="https://mbkitsystems.com/images/linear-motion/linear_structure.jpg" alt="">
      <h3 class="pdfTitle">Linear Structure</h3>
    </div>
  </div>
</div>

Answer 1

您需要为独立于内容部分的叠加层制作一个单独的 div...

.pdfWrap {
  border-top: 1px solid #CFCFCF;
  border-right: 1px solid #CFCFCF;
  border-bottom: 1px solid #CFCFCF;
  border-radius: 2px;
  position: relative;
  height: 260px;
  width: 25%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  transition-delay: 0.10s;
  -webkit-transition-delay: 0.10s;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pdfWrap .overlay {
  z-index: 11111;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  cursor: pointer;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
}

.pdfWrap:hover .overlay {
  background-color: rgba(0, 0, 0, 0.6);
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  transition-delay: 0.10s;
  -webkit-transition-delay: 0.10s;
  z-index: 10;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  cursor: pointer;
  display: block;
}

.pdfBox img {
  width: 60%;
  height: auto;
  margin: 0 auto;
  background: transparent;
}

<div class="pdfWrap">
  <div class="overlay"></div>
  <div class=" pdfBox total-center">
    <img src="https://mbkitsystems.com/images/linear-motion/linear_structure.jpg" alt="">
    <h3 class="pdfTitle">Linear Structure</h3>
  </div>
</div>