Question

我想要得到这样的东西。但它必须使用Bootstrap 4。

我目前的代码如下：

<section class="banner embed-responsive-item">
    <video class="hidden-sm-down" autoplay="" loop="">
        <source src="http://www.example/home.webm" type="video/webm">
        <source src="http://www.example/home.mp4" type="video/mp4">
    </video>
    <div class="float-left">YOUR EXPERIENCE STARTS</div><br>
    <a class="btn btn-primary btn-lg" href="#" role="button">Enquire Now</a>
</section>

可悲的是，输出只是将文本和按钮放在图像的末尾而不是放在它的顶部。

Answer 1

video {
  position: relative;
  height: auto;
  width: 100%;
}

h2 {
  position: absolute;
  top: 50%;
  right: 0;
}

a {
  position: absolute;
  top: 50%;
  right: 5%;
}

Answer 2

对我来说，到目前为止，使它起作用的唯一方法是放置内联CSS。我将标题放置在该部分之外。

   <h3 style="font-size: 75px;
       font-family: 'Poppins', sans-serif;
       color: #e8d5a0;
       position: absolute;
       top: 400px;
       left: 650px;
       display: inline-block;">Home</h3>

   <a class="btn-primary btn-lg" href="#" style="font-size:20px;
       font-family: 'Poppins', sans-serif;
       color: #e8d5a0;
       position: absolute;
       top: 600px;
       left: 820px;
       display: inline-block;">Hello</a>
    <section>
       <video class="embed-responsive" height="auto" width="100%" 
            poster="/static/1stframe.jpg" autoplay muted logo loop style="  
            position:fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            z-index:-1;">
            <source src="/static/4k.webm" type="video/webm">
       </video>
    </section>

Answer 3

使您的视频相对位置和内容绝对，您可以实现图像中的所有内容！

希望它有所帮助！

Html（由于图片中的文字字体大小较高，我将其设为h2而不是div）：

<section class="banner embed-responsive-item">
    <video class="hidden-sm-down" autoplay="" loop="">
        <source src="http://www.example/home.webm" type="video/webm">
        <source src="http://www.example/home.mp4" type="video/mp4">
    </video>
    <h2 class="float-right">YOUR EXPERIENCE STARTS</h2><br>
    <a class="btn btn-primary btn-lg float-right" href="#" role="button">Enquire Now</a>
</section>

Css :(您必须从文本和按钮的顶部更改位置）

video{
  position:relative;
  display:block;
  width:100%; 
}
.float-right{
  position:absolute;
}
h2{
  top:80px;
  right:0;
}
a{
  top:150px;
  right:50px;
}

Answer 4

<div class="container">
    <img src="img_snow.jpg" alt="Snow">
    <button class="btn">Button</button>
</div>

Bootstrap 4 - 在视频上添加文本和按钮

4 个答案: