我制作了这个 slider ,我希望图像能够响应并且 text-holder
始终位于 slider 的底部(就像覆盖层一样)。我尝试了很多组合,但找不到合适的组合。如果我为 .text-holder
设置 margin-top
或为图像设置 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
最佳答案
这是工作演示:https://codepen.io/d3vma/pen/QavgPg
您使用的是 .slider-container
而不是 #slider-container
并且这应该是相对于绝对容器的容器(.text-持有人
)
关于html - 将 div 放在 slider 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48032474/