html - 在 "hero"节后添加内容

Question

我已将一个全屏背景视频和一些介绍文字放入主页的一个部分。现在我想继续将内容添加到主页的下半部分，但有些东西完全搞砸了。你可以明白我的意思:

我在要添加为视频下方新部分的新内容周围画了一个红圈。由于某种原因，它停留在页面顶部。

这是 HTML 的样子:

 <section id="fullscreen-bg">
        <video loop muted autoplay poster="img/landing_bg.jpg" class="fullscreen-bg__video">
            <source src="video/big_buck_bunny.webm" type="video/webm">
            <source src="img/demo.mp4" type="video/mp4">
            <source src="video/big_buck_bunny.ogv" type="video/ogg">
        </video>

        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>dolm it</h1>
                    <p>Dolm IT is modern design & development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, PHP, Java, AngularJS, HTML & CSS.</p>
                    <button type="button" class="btn btn-default white">more</button>
                </div>
            </div>
        </div>
        <!--end container-->
    </section>
    <!--end fullscreen-bg-->


    <section id="whatwedo">

        <div class="container">
            <div class="row">
                <div class="col-md-12">

                    <h1>what we do</h1>
                    <p>We offer a wide range of software development and design options from a simple web development to more complicated information systems. We ensure our customers get the right thing, done the right way.</p>
                </div>
            </div>
        </div>
    </section>

这是 CSS:

                   /*fullscreen bg*/

                    #fullscreen-bg h1 {
                        color: #ffffff;
                        font-family: 'Akrobat-ExtraBold';
                        font-size: 4.9rem;
                        text-transform: uppercase;
                        letter-spacing: 2px;
                        margin-bottom: 32px;
                    }

                    #fullscreen-bg p {
                        color: #ffffff;
                        font-family: 'Akrobat-Bold';
                        font-size: 1.5rem;
                    }

                    #fullscreen-bg .col-md-6 {
                        margin-top: 200px;
                        padding: 130px 0 130px 0;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: flex-start;
                        -ms-flex-align: flex-start;
                        align-items: flex-start;
                        -webkit-box-orient: vertical;
                        -webkit-box-direction: reverse;
                        -ms-flex-direction: column;
                        flex-direction: column;
                        z-index: 10;
                    }
                    /*video bg*/

                    #fullscreen-bg {
                        position: fixed;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        overflow: hidden;
                        z-index: -100;
                    }

                    .fullscreen-bg__video {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }

                    #fullscreen-bg:before {
                        content: '';
                        background: rgba(14, 124, 132, 0.8);
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 1;
                    }

                    @media (min-aspect-ratio: 16/9) {
                        .fullscreen-bg__video {
                            width: 100%;
                            height: auto;
                        }
                    }

                    @media (max-aspect-ratio: 16/9) {
                        .fullscreen-bg__video {
                            width: auto;
                            height: 100%;
                        }
                    }

                    @media (max-width: 767px) {
                        #fullscreen-bg {
                            url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
                        }
                        .fullscreen-bg__video {
                            display: none;
                        }
                    }

可以看到演示页面here .请帮我解决这个问题，这样我才能继续 build 这个网站。谢谢。

编辑:它应该是这样的:

Answer 1

我认为您可以通过如下设置全屏部分类来实现您想要实现的目标:

#fullscreen-bg {
    overflow: hidden;
    z-index: -100;
}

如上所示，fullscreen-bg 部分不应固定位置，因为它始终占据浏览器的整个 View ，并且添加的任何其他内容将始终显示在其后面。

现在要实现您想要的外观，请从媒体查询中的 fullscreen-bg__video 类中删除 height: auto 以获取 min-aspect-ratio: 16/9。

@media (min-aspect-ratio: 16/9)
.fullscreen-bg__video {
width: 100%;
}

我认为这将满足您的需求。

希望这对您有所帮助。

[编辑]

请在 fullscreen-bg 部分添加 margin-top:100px(或任何适合的)以补偿固定在顶部的导航栏。这将解决我们在屏幕高度较大时落后于第一部分的部分边距问题。

要覆盖侧面的视频白色区域，请添加以下 css

@media (min-aspect-ratio: 16/9)
.fullscreen-bg__video {
    width: 100%;
    -webkit-transform: scaleX(1.2);
    -moz-transform: scaleX(1.2);
    -ms-transform: scaleX(1.2);
}

仅供引用:设置 whatwedo 部分的上边距的最佳方法是在 document.ready 和 window.resize 方法上使用 jQuery，方法是添加导航栏高度 + fullscreen-bg 部分高度并将该值设置为上边距对于 whatwedo 部分。这将使它完全响应并根据屏幕尺寸自行调整。