背景未显示在网页中答案

【问题标题】：Background is not showing in web-page背景未显示在网页中
【发布时间】：2020-09-15 14:46:52
【问题描述】：

我正在从事 Colt Steele 在 Udemy 的引导训练营中的 Aurora grove 项目。我想使用我自己的背景视频，而不是使用他为项目所拥有的背景图像。我像他一样插入了它，但由于某种原因它没有出现。我可以分享项目的github链接： https://github.com/Kazim786/sarah-calligraphy

这是别人部署的完成的 colt Steele 项目的链接：https://aurora-grove.herokuapp.com/index.html （需要插入视频代替tipis图片）

下面是插入背景视频的代码：（#showcase 是我插入视频链接的地方）这个项目也用到了考拉

body {
    font-family: cursive;;
    background: pink;
}

.navbar {
    font-weight: 100;
    .navbar-brand h3{
        font-weight: 100;
    }
    .nav-item{
        font-size: 1.4rem;
    }
    .nav-link:hover{
        transition: border 0.2s;
        border-bottom: 1px solid white;
    }

}

#showcase {
    background: url("../media/video-1599785729.mp4") bottom center / cover no-repeat;
    min-height: 750px;
    h1{
        font-family: cursive;
        line-height: 1;
    }

    #book{
        font-size: 1.5rem;
        border-radius: 2rem;
    }

    }




@media(max-width: 760px){
    .navbar{
        background: #1f1f1f;
        .nav-link:hover {
            border-bottom: none;
        }
    }
    #showcase {
        min-height: 500px;
        h1{
            font-size: 4rem;
        }
    }
}

如果还需要 HTML，请告诉我，我将在此处编辑它

【问题讨论】：

嗨皮特，你是什么意思？抱歉，CSS 不是我的强项
很抱歉刚刚意识到您正在使用视频，您不能那样做 - 看看这个以了解如何做到这一点：css-tricks.com/should-i-use-a-video-as-a-background
谢谢皮特！视频正在显示，它只是不占用与此 aurora-grove.herokuapp.com/index.html 网站中的图片相同的空间。你能帮我弄清楚吗？并将您的建议放在答案中，这样我就可以投票给您，以获得您的大力帮助

标签： css bootstrap-4 sass koala

【解决方案1】：

为什么不使用视频标签呢？这肯定会奏效。确保视频绝对定位在您的#showcase 容器中，如下所示：

<section id="showcase" class="d-flex align-items-center justify-content-center">
    <video style="
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
" controls=""><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"></video>
      
... (rest of the code)...
      
</section>

【讨论】：