html - 如何在实体化的文本内容后面设置背景幻灯片？

Question

我想在实体化的文本内容后面设置一个背景幻灯片。文本内容必须显示在所有幻灯片上，它不应该像轮播一样。我怎样才能做到这一点？请帮我解决这个问题。

Answer 1

最后我找到了一种在文本内容后面设置背景幻灯片的方法。将下面的 HTML 和 CSS 代码分别放入您的 .html 和 .css 文件中。 HTML 部分:

<div class="slider fullscreen">
  <ul class="slides">
    <li>
        <img style="max-width: 100%" src="images/paper-boats1.jpg">
    </li>
    <li>
        <img style="max-width: 100%" src="images/paper-boats2.jpg">
    </li>
    <li>
        <img style="max-width: 100%" src="images/paper-boats3.jpg">
    </li>
  </ul>
  <div id="text-on-slider">
    //your text content goes here...        
  </div>
</div>

CSS 部分:

#text-on-slider{
   position: absolute;
   height: calc(95vh); 
   margin-top: 0px; 
   display: flex; 
   flex-direction: column; 
   justify-content: center; 
   align-items: left; 
   z-index: 2; 
   top: 0; 
   pointer-events: none; 
   width: 100%;
}

这对我很有效。所以我希望这对你也有用。