Question

这是每张幻灯片的样子：

.slideImage {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.slideOverlay {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  justify-content: center;
}

.slideImage:hover {
  opacity: 0.3;
}

.slideOverlay:hover {
  opacity: 1;
}

<div className="each-slide">
  <div className="slideImage" style={{ 'backgroundImage': `url(${slideImages[0]})`}}>
  </div>
  <div className="slideOverlay">
    <p>OverlayText</p>
  </div>
</div>

有三张幻灯片。图像覆盖文字仅出现在第二张幻灯片上，而第二张幻灯片不会淡出。有人可以告诉我为什么吗？

Answer 1

答案是。每个幻灯片的位置都必须是相对位置

幻灯片上的图像叠加层将叠加层放到下一张幻灯片上

1 个答案: