Question

我创建了这个滑块，我希望图像能够响应并且text-holder始终位于滑块的底部（如叠加层）。我尝试了很多组合，但我找不到合适的组合。如果我为margin-top设置了.text-holder或为图片设置了height，那么它就没有响应。

HTML

<div id="slider-container">
  <div class="slider">
    <img class="slider-photo" src="https://cdn.pixabay.com/photo/2017/12/09/16/41/snow-man-3008179_960_720.jpg" >
    <img class="slider-photo" src="https://cdn.pixabay.com/photo/2015/12/12/22/35/snowman-1090261_960_720.jpg" >
    <img class="slider-photo" src="https://cdn.pixabay.com/photo/2014/04/05/11/38/christmas-316448_960_720.jpg" >
  </div>
  <div class="text-holder">
    <p>This is some text</p>
    <p>I want to be on the bottom of the slider</p>
  </div>
</div>

CSS

$slides: 3;
$time_per_slide: 4;
$total_animation_time: $time_per_slide * $slides;

.slider-container {
  display: flex;
}

.slider {
  overflow: hidden;
  background-color: black;
}
.slider-photo {
  position:absolute;
  z-index: -1;
  animation: round #{$total_animation_time}s infinite;
  opacity: 0;
}
@keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@for $index from 1 to $slides + 1 {
  img:nth-child(#{$index}) {
    animation-delay: #{$total_animation_time - $time_per_slide * $index}s;
  }
}
.text-holder {
  background: rgba(255, 0, 0, 0.4);
  padding: 20px 10px;
  width: 100%;
}

那些是大图像，它们将覆盖整个屏幕宽度，这是我试图用较小的图像制作的笔https://codepen.io/al-josh/pen/VybWWg

Answer 1

以下是工作演示：https://codepen.io/d3vma/pen/QavgPg

您使用的是.slider-container而不是#slider-container，这应该是容器的相对方框，而绝对的是.text-holder）

Answer 2

$slides: 3;
$time_per_slide: 4;
$total_animation_time: 
$time_per_slide * $slides;
#slider-container {  display: flex;  position:relative;}
.slider {  overflow: hidden; background-color: black;}
.slider-photo { position:absolute;  z-index: -1;  animation: round #{$total_animation_time}s infinite;  opacity: 0;}
@keyframes round {  
  25% {    opacity: 1;  }  
  40% {    opacity: 0;  }
}
@for $index from 1 to $slides + 1 {  
  img:nth-child(#{$index}) {    
     animation-delay: #{$total_animation_time - $time_per_slide * $index}s; 
}
} 
.text-holder {position:absolute;  
bottom:0;  background: rgba(255, 0, 0, 0.4);  
padding: 20px 10px;  width: 100%;
}

将div放在滑块的底部

2 个答案: