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

Question

我是 HTML 和 CSS 的新手。我想在一个部分显示一些文本，循环播放视频 background.I 尝试将 z-index 设置为 -1 但我仍然看不到 text.I 也尝试放置文本（<p> Hello!</p>) 在块的不同部分，但没有 avail.Here 是 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 属性允许作者向浏览器提供有关 he/she 认为会带来最佳用户体验的提示。如上所述，在某些情况下可能会忽略此属性。
autoplay - 自动播放视频。视频会尽快自动开始播放而不会停止。
loop - 它指定视频每次结束时都将重新开始。
muted - 它指定视频的音频输出应该静音。假设你想避免视频的 music/sound 为背景视频打开

最后，整个事情是这样的：

<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

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

How to display text for a section with a looping video background?

html

css

video