如何在交叉渐变滑块上放置文本？

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

添加一个元素，并将其放置在 [HttpPost] public async Task<IActionResult> UploadFile([FromForm]IFormFile fileData) { try { if (fileData == null) return BadRequest("null file"); if (fileData.Length == 0) { return BadRequest("empty file"); } var folderName = Path.Combine("resources", "iles"); var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), folderName); var fileName = ContentDispositionHeaderValue.Parse(fileData.ContentDisposition).FileName.Trim('"'); var fullpath = Path.Combine(pathToSave, fileName); using (var stream = new FileStream(fullpath, FileMode.Create)) { await fileData.CopyToAsync(stream); } return Ok(); } catch (Exception) { return StatusCode(500, "internal server error"); } } 上，并为其赋予一个比图像更大的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;
}

更改左/上属性以重新定位。