Question

我正在构建的页面上有一个英雄视频我在我的Bootstrap行遇到问题，因为视频位于英雄下面。我知道它必须对定位做些什么，但我似乎无法做到正确。任何想法如何解决这个问题，以便一切正确堆叠？

<div class="row-hero-container">
    <div class="row-fluid row-hero">
        <div class="video-holder gradient-overlay video-wrapper">
            <video autoplay loop muted>
                <source src="http://www.w3schools.com/tags/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
                <source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
                <img src="/images/product/product-parent-hero.jpg" title="Your browser does not support the <video> tag">
            </video>
        </div>
    </div>
    <div class="container row-hero-overlay text-center">
        <div class="row">
            <div class="col-md-12 row-hero-info">
                <h1 class="row-hero-title">Headline in Video.</h1>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row row-about">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

JS Fiddle http://jsfiddle.net/n3hqpgnw/

Answer 1

看起来你可以在这里做两种方式。

只需在Top

中添加一些余量

.row-about {
  background-color: black;
  height: 500px;
  border-top: 2px solid grey;
  margin-top:1%; /* can use this to clear from above */
}

或者在底部添加一些余量。我也在这里使用了position:relative;。

.video-holder {
  position: relative;
  width: 100%;
  margin-bottom:0%; /* can use this to clear from below */
  top: 0;
  left: 0;
  opacity: 0.8;
}

you control this with classes，我刚刚转过红色阴影，因此很明显可以使用。

这是我们前几天帮助的好看的视频背景。 The Fiddle is here

The Fiddle

Bootstrap行的视频英雄问题

1 个答案: