Question

我在尝试解决此问题时遇到问题。我有一个客户端要求网站标题需要一个视频作为背景，其上有一个暗层，并且视频和视频覆盖也会有一些文本（如h1，span等）。到目前为止，我的尝试没有用。

我用谷歌搜索并发现了一些旧问题，但没有一个有效。

这个概念非常简单。我的章节中有3个div叫做“英雄”：

视频叠加：这是视频的暗叠加
视频包装：这包含视频元素
hero-content：包含将在视频上显示的h1，span等元素。

HTML

<section class="hero" id="hero">
    <div class="video-overlay"></div>

    <div class="video-wrap">
        <video autoplay="autoplay" muted="muted" loop="loop" poster="media/img/vid-placeholder.jpg" class="bg-video">
                <source src="media/vid/amazon.mp4" type="video/mp4">
        </video>
    </div>

    <div class="row hero-content text-center">
        <div class="col-md-12">
            <img src="media/img/logo-white-2x.png" class="logo animated fadeInDown" />
            <h1 class="animated fadeInDown">The leading, most customer friendly and hassle-free refund service since 2005.</h1>
            <a href="#buy" class="use-btn animated fadeInUp">Claim now</a> <a href="#about" class="learn-btn animated fadeInUp">Learn more</a>
        </div>
    </div>
</section>

CSS

.hero {
   position: relative;
   color: #fff;
   width: 100%;
   height: 100%;
}
.video-overlay {
    position: relative;
    top: 0px;
    left: 0px;
    background: #000000;
    opacity: 0.6;
    height: auto;
    width: 100%;
    z-index: 1;
}
.video-wrap {
   display: block;
   overflow: hidden;
   z-index: -999;
}
.bg-video {
   min-height:100%;
   width: 100%;
   height: auto;
   overflow: hidden;
   z-index: -999;
}
.hero-content {
   position: relative;
   z-index: 5;
}

使用此代码，我得到以下结果：http://prntscr.com/8y3uau 视频下方显示的文字如下所示：http://prntscr.com/8y3uok

Here是一个很好的模板，您可以使用它作为示例来了解视频和视频必须显示文字。

我还希望视频能够快速响应。

其他信息：

我使用Bootstrap作为网站的响应部分
也可以在youtube上找到视频，因此，如果您对YouTube视频有所了解而不是使用<video>标记，那就没关系。

非常感谢任何人提前！

Answer 1

我按照我收到的建议并使用CSS稍微玩了一下，最后使用以下代码解决了问题。再次感谢@Ionut和@Leuquim！

<强> HTML

<section class="hero" id="hero">
    <div class="video-overlay"></div>
    <div class="video-wrap">
        <video autoplay="autoplay" muted="muted" loop="loop" poster="media/img/vid-placeholder.jpg" class="bg-video">
            <source src="media/vid/amazon.mp4" type="video/mp4">
        </video>
    </div>
    <div class="container">
        <div class="row hero-content text-center">
            <div class="col-sm-12 col-md-12 col-lg-8 col-lg-offset-2">
                <img src="media/img/logo.png" class="logo animated fadeInDown" />
                <h1 class="animated fadeInDown top-bottom-borders">The leading, most customer friendly and hassle-free refund service since 2005.</h1>
                <a href="#buy" class="use-btn animated fadeInUp">Claim now</a> <a href="#about" class="learn-btn animated fadeInUp">Learn more</a>
            </div>
        </div>
    </div>
</section>

<强> CSS

.hero {
    position: relative;
    min-height: 800px;
    color: #fff;
}
.video-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.8;
    z-index: 1;
}
.video-wrap {
    position: absolute;
    height: 100%;
    width: 100%;
}
.bg-video {
    height: 100%;
    min-width: 100%;
    width: auto;
    overflow-y: hidden;
    z-index: -999;
}
.hero-content {
    position: relative;
    top: 120px;
    z-index: 5;
}

注意：我的页面也使用Bootstrap作为响应部分（网格系统）。

全屏视频作为网站标题背景

1 个答案: