html - 如何显示具有循环视频背景的部分的文本？

Question

我对 HTML 和 CSS 还很陌生。我想在一个部分显示一些文本，带有循环视频背景。我尝试将 z-index 设置为 -1 但我仍然看不到文本。我还尝试将文本( <p> Hello!</p> )放在不同的部分块，但无济于事。这是 HTML 代码:

 <section id ="quote" style="height:200px ; width: 100%; padding-top: 0px; padding-bottom: 0px; margin: 0px">
        <div>
                <video id="video" style=" position: relative ; background : cover ; background-position: center; width:100%; height:20% z-index:-1" autoplay loop muted >
                    <p color":#000000"> hello ! </p>
                    <source src="journey.mp4" type='video/mp4'/>
                </video>
        </div>
    </section>

这是引用 id 标签的 CSS:

#quote {
background-repeat: repeat;
overflow-x: hidden;
overflow-y:hidden;
height: 20px;

Answer 1

I tried setting the z-index to -1 but I am still unable to see the text.

在这种情况下 z-index并不是创建这种样式效果所真正需要的。 position:absolute;正是您所需要的。
通过把你的 <p>在<video>之外并给它一个绝对位置就可以完成这项工作。

I want to display some text in a section, with a looping video background

要创建循环视频作为背景，您需要设置
<video preload autoplay loop muted>

• > preload - 我们在这里并不真正需要它，因为如果存在自动播放，preload 属性将被忽略。
  
  preload 属性指定作者认为是否以及如何在页面加载时加载视频。 preload 属性允许作者向浏览器提供他/她认为会带来最佳用户体验的提示。如上所述，在某些情况下可能会忽略此属性。
• > 自动播放 - 自动播放视频。视频会尽快自动开始播放而不会停止。
• > loop - 它指定视频每次结束时都会重新开始。
• > 静音 - 它指定视频的音频输出应该静音。假设您想避免为背景视频打开视频的音乐/声音

最后，这是整个事情的样子:

<section id ="quote" style="height:200px ; width: 100%; padding-top: 0px; padding-bottom: 0px; margin: 0px">
        <div class="videoContainer">
            <video autoplay loop muted>
                <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
                <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/webm; codecs="vp8, vorbis"' />
                    Video not supported.
            </video>
            <p class="overlayText"> hello there! This is some text.</p>
        </div>
</section>

和你的 CSS

#quote {
    background-repeat: repeat;
    overflow: hidden;
    position: relative;
}
.overlayText {
    color:#000;
    position:absolute;
    top: 0;
}   

/* This is just some CSS styling to make the video fill 100% of its div */
.videoContainer {
    height:100%;
    width:100%;
    overflow: hidden;
}   
.videoContainer video {
    min-width: 100%;
    min-height: 100%;
}

Online Example Here