我有一个带有背景视频和一些内容的容器。问题是后台视频正在禁用内容(按钮)。
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>
答案 0 :(得分:0)
您的视频内容重叠。将position: relative
提高z-index
。
.container-fluid {
position: relative;
z-index: 10;
}
答案 1 :(得分:0)
<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;">
...
答案 2 :(得分:0)
只需将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>
答案 3 :(得分:0)