html - 如何将文本放在交叉渐变 slider 上？

Question

如何在图片上放置文字？
当我尝试时，它只会使文本保留在其中一张图像中。

我不希望文本更改或消失，所有图像的文本必须相同。

我尝试将 position 设置为 absolute 并将其放在图像上，但不会只显示第一张图像。

.slider {
  max-width: 1080px;
  height: 95%;
  margin: 0 auto;
  padding-top: 120px;
  position: relative;
}
.slide1,.slide2,.slide3 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url(images/child.jpg)no-repeat center;
      background-size: cover;
    animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;

} 
.slide2 {
  background: url(images/tech.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
    background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371564896_p17tbq6n86jdo3ishhta3fv1i3.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

<div class="slider">
  <div class="slide1"></div>
  <div class="slide2"></div>
  <div class="slide3"></div>
</div>

Answer 1

添加一个元素，也将它定位在 absolute 位置，并给它一个比图像更大的 z-index。

.slider {
  position: relative;
  max-width: 1080px;
  height: 95vh;
  margin: 0 auto;
  padding-top: 120px;
  overflow: hidden;
}

.slider-text {
  position: absolute;
  left: 0;
  top: 0 z-index: 2;
}

<div class="slider">
  <div class="slider-text"> My text </div>
  <div class="slide1"></div>
  <div class="slide2"></div>
  <div class="slide3"></div>
</div>

更改 left/top 属性以重新定位它。