Question

我有一个带有背景视频和一些内容的容器。问题是后台视频正在禁用内容（按钮）。

JSbin链接：http://jsbin.com/vehonetoxa/edit?html,output

代码：

<main style="height:723px">
    <div class="background" id="bgVideo" style="opacity: 0.2;">
        <video autoplay="autoplay" id="video_background" loop="loop" preload="auto" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: -100; min-width: 100%;min-height:100%;">
            <source alt="ekin care preview" src="https://dhqfzvce2gbm4.cloudfront.net/assets/video/preview-41f7830386411c84a3ecb1e33407aee340d0f51e0f2bc4960397b17b73e44e52.mp4" type="video/mp4">
                <source alt="ekin care preview" src="https://dhqfzvce2gbm4.cloudfront.net/assets/video/preview-b73e242581b99456fb569e1dba4ce6a21972e59c458432329a4b48eb8db5d3fe.ogv" type="video/ogg">
                    <source alt="ekin care preview" src="https://dhqfzvce2gbm4.cloudfront.net/assets/video/preview-2919a66a9f41eb7bb41adfb66d347a01ec94d5cf989d776668a190fcbdac9df0.webm" type="video/webm">
                    </source>
                </source>
            </source>
        </video>
    </div>
    <div class="container-fluid mb-xl center-align" style="background-color: #2bbcf3; min-height: 723px;">
        <div class="text-center">
            <h1 class="white-text">Take Charge of your health</h1>
                <p class="white-text text-size-medium mb-md bolded-text-lg">India's first personel digital health assistance</p>
                <a class="btn btn-default get-started-btn bolded-text-lg txt-blue" href="/register" style="color:#2bbcf3">GET STARTED-FREE FOREVER</a>
        </div>
    </div>
</main>

Answer 1

您的视频内容重叠。将position: relative提高z-index。

.container-fluid {
    position: relative;
    z-index: 10;
}

Answer 2

<div class="container-fluid mb-xl center-align" style="style="background-color: rgba(43, 188, 243, 0.35);min-height: 723px;width: 100%;position: absolute;">
...

Answer 3

只需将position absolute添加到您的btn，如下所示。

<a class="btn btn-default get-started-btn bolded-text-lg txt-blue" href="/register" style="color:#111;position:absolute;">GET STARTED-FREE FOREVER</a>

Answer 4

您的视频内容重叠。

看看我已经更新了你的垃圾箱。

Background Video

禁用链接的背景视频

4 个答案: