问文本消失在图像slidebar后面
EN

Stack Overflow用户

提问于 2020-02-15 11:13:06

回答 1查看 34关注 0票数 0

我有个问题:我制作了一个显示图片的幻灯片。现在我想在下面继续，把文本和其他东西放在页面上，但是如果我试图在下面插入一个文本，文本将不会写在幻灯片下面，而是在幻灯片下面。这是我希望你能帮我的代码。

div.slider {
    display: flex;
    width: 92%;
    height: 750px;
    margin-bottom: 20px;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 20px;
    background-color: #1f1f1f;
    overflow: hidden;
    position: absolute;
}
div.slider > * {
    position: absolute;
    display: flex;
    widows: 100%;
    height: 100%;
    background: #1f1f1f;
    animation: slide 12s infinite;
    overflow: hidden;
}
div.slide:nth-child(1) {
    left: 0%;
    animation-delay: -1s;
    background-image: url(https://wowslider.com/sliders/demo-7/data/images/amsterdam.jpg);
    background-size: cover;
    background-position: center;
}
div.slide:nth-child(2) {
    left: 100%;
    animation-delay: 2s;
    background-image: url(https://wowslider.com/sliders/demo-7/data/images/barpark.jpg);
    background-size: cover;
    background-position: center;
}
div.slide:nth-child(3) {
    left: 100%;
    animation-delay: 5s;
    background-image: url(https://wowslider.com/sliders/demo-7/data/images/florence.jpg);
    background-size: cover;
    background-position: center;
}
div.slide:nth-child(4) {
    left: 100%;
    animation-delay: 8s;
    background-image: url(https://wowslider.com/sliders/demo-7/data/images/gate.jpg);
    background-size: cover;
    background-position: center;
}
div.slide p {
    font-size: 70px;
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 340px;
    color: #fff
}
@keyframes slide {
    0% { left: 100%; width: 100%;}
    5% { left: 0%;}
    25% { left: 0%;}
    30% { left: -100%; width: 100%;}
    30.0001% { left: -100%; width: 0%;}
    100% { left: 100%; width: 0%;}
}

<html>
<body>
      <div class="slider">
          <div class="slide"><p>Slide1</p></div>
          <div class="slide"><p>Slide2</p></div>
          <div class="slide"><p>Slide3</p></div>
          <div class="slide"><p>Slide4</p></div>
      </div>
      <div>
         <p>Text that should appear under the slideshow.</p>
      </div>
</body>
</html>

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-15 11:41:12

将position of div.slider更改为relative

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60238193

复制

相似问题

问文本消失在图像slidebar后面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本消失在图像slidebar后面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本消失在图像slidebar后面
EN