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。请帮我解决这个问题，以便继续构建这个网站。谢谢。

编辑：这应该是这样的：

Answer 1

我认为您要实现的目标可以通过设置全屏部分类来完成，如下所示：

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

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

现在要实现你想要的外观，从媒体查询中的全屏-bg__video类中删除高度：自动为min-aspect-ratio：16/9。

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

我认为这会做正在寻找的事情。

希望这有帮助。

[编辑]

请将margin-top：100px（或任何套装）添加到fullscreen-bg部分，以补偿固定在顶部的导航栏。这将修复当屏幕高度越大时我们在第一部分后面的部分保证金问题。

要覆盖侧面的视频白色区域，请添加以下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，方法是添加navbar height + fullscreen-bg部分高度并将该值设置为上边距对于whatwedo部分。这将使其完全响应并根据屏幕大小进行自我调整。

在＆＃34;英雄＆＃34;之后添加内容部分

1 个答案: