Question

我在通过网站上的全屏视频显示文本时遇到了一些麻烦。我以前曾经使用过它，但是不记得我是如何实现的，并且没有运气尝试过z-index属性，文本一直显示在我的视频元素下方，而不是顶部。

我进行了一些编辑，但没有意识到面板混乱，没有旧版本可以使用。

这是我到目前为止所拥有的，我可能只是忽略了一些东西，但不确定为什么它对我不起作用。

 <section class="section-ux-design">

        <video id="video" autoplay loop muted>
            <source src="/video.mp4" type="video/mp4">

        </video>

        <div class="overlay-text">
            <h2>Text</h2>
            <p>Text</p>

        </div>

    </section>

CSS：

.section-ux-design {
    position: relative;
}

.overlay-text {
    position: absolute;
    color: #fff;
    padding: 0% 15%;
    z-index: 0;
}

.overlay-text h2 {
    text-align: left;
}

#video {
    width: 100vw;
    z-index: -1;
}

我正在寻求实现以下目标：https://sparkengine.tv/，但是仅使用文字内容，因为这不会成为我的主要英雄/标头视频。

Answer 1

.overlay-text {
    position: absolute;
    color: #fff;
    padding: 0% 15%;
    z-index: 0;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

那应该将文本容器放在视频上方，然后您可以从此处放置文本。

Answer 2

您需要为#video元素定义 position ，因为z-index仅影响具有非静态（默认值）位置值的元素。

您还应该尝试指定.overlay-text的实际绝对坐标，否则它将被推送到video部分的下面。我修改了以下蚂蚁，对我来说效果很好：

.section-ux-design {
    position: relative;
}

.overlay-text {
    position: absolute;
    color: #fff;
    padding: 0% 15%;
    z-index: 0;
    top:0;
    left:0;
}

.overlay-text h2 {
    text-align: left;
}

#video {
    width: 100vw;
    z-index: -1;
    position:relative;
}

如何在英雄/章节视频上显示文本

2 个答案: