如何使用 HTML 和 CSS 将文本放在幻灯片前面？答案

【问题标题】：How to put the text in front of a slideshow using HTML and CSS?如何使用 HTML 和 CSS 将文本放在幻灯片前面？
【发布时间】：2020-12-10 19:49:57
【问题描述】：

我最近一直在做一个网站，遇到了一个问题，我想在图片幻灯片后面的文字在它后面，我不知道如何把它放在前面。有人可以帮我吗？我同时输入了 HTML 和 CSS 代码，因为我不知道我必须在哪里修复什么。

这是 HTML。

<section id="showcase">
                
                <div class="container">
                    <p>WELCOME TO THIS WEBSITE.</p>
                </div>

                <div class="button">
                        <a href="about.html" class="btn">LEARN MORE</a>
                    </div>

                <div id="slider">
                    <figure>
                        <img src="gallery/1.jpg">
                        <img src="gallery/3.jpg">
                        <img src="gallery/4.jpg">
                    </figure>
                    
                </div>
        </section>

这是CSS

#slider figure{
    position: relative;
    width: 500%;
    margin:0;
    left: 0;
    animation: 20s slider infinite;
}

#slider figure img{
    float: left;
    width: 20%;
    
}

@keyframes slider{
    0%{
        left:0;
    }
    20%{
        left: 0;
    }
    25%{
        left: -100%;
    }
    45%{
        left: -100%
    }
    50%{
        left: -200%;
    }
    70%{
        left: -200%;
    }
}

谢谢！

【问题讨论】：

嗨，你想在前面放什么文字？当我运行您的代码时，它看起来不错，即欢迎和按钮就在幻灯片上方。
嗨。我希望文本像背景一样出现在幻灯片上，但由于某种原因，它在图像后面......

标签： html css text slider

【解决方案1】：

您可以通过多种方式获取幻灯片顶部的文本。一种是先绘制幻灯片，然后您知道那里有图像的高度，然后将文本设置在一个 div 中，该 div 具有绝对定位 - 这意味着它不会立即定位在滑块之后，而是相对于包含本身具有位置属性的元素。

显然，您需要对文本进行格式化，使其在图像顶部显示得很好，但如何做到最好将取决于您的图像是什么样的，您想要什么大小的字体等等。

这是一个基本的 sn-p，使用您的代码并将文本放入一个 div 中，该 div 位于 sn-p 之后。

#slider figure{
    position: relative;
    width: 500%;
    margin:0;
    left: 0;
    animation: 20s slider infinite;
}

#slider figure img{
    float: left;
    width: 20%;
    
}

@keyframes slider{
    0%{
        left:0;
    }
    20%{
        left: 0;
    }
    25%{
        left: -100%;
    }
    45%{
        left: -100%
    }
    50%{
        left: -200%;
    }
    70%{
        left: -200%;
    }
}
#showcase {
  position: relative;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
}

<section id="showcase">
                <div id="slider">
                    <figure>
                        <img src="https://picsum.photos/id/10/300/300">
                        <img src="https://picsum.photos/id/100/300/300">
                        <img src="https://picsum.photos/id/1001/300/300">
                    </figure>
                    
                </div>
               <div id="text"> 
                <div class="container">
                    <p>WELCOME TO THIS WEBSITE.</p>
                </div>

                <div class="button">
                        <a href="about.html" class="btn">LEARN MORE</a>
                    </div>
</div>
</section>

【讨论】：