如何在具体化的文本内容后面设置背景幻灯片?

时间:2018-04-17 17:20:37

标签: html css3 materialize

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

1 个答案:

答案 0 :(得分:0)

最后,我找到了一种在文本内容后面设置背景幻灯片的方法。将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%;
}

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