Question

我对HTML＆amp; 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

我尝试将z-index设置为-1，但我仍然无法看到文本。

在这种情况下，z-index并不是您创建此样式效果所需的。您需要position:absolute; 将<p>置于<video>之外并给予其绝对位置即可完成工作。

我想在一个部分中显示一些带有循环视频的文字背景

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

预加载 - 我们这里并不需要这个，因为如果存在自动播放，则会忽略preload属性。

preload属性指定作者是否以及如何在页面加载时认为应该加载视频。 preload属性允许作者向浏览器提供关于他/她认为将导致最佳用户体验的提示。如上所述，在某些情况下可以忽略该属性。
自动播放 - 自动播放视频。视频将在不停止的情况下立即自动开始播放。
循环 - 它指定视频每次完成时都会重新开始。
静音 - 指定视频的音频输出应静音。假设您要避免为背景视频打开视频的音乐/声音

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

<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

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

1 个答案: