禁用鏈接的背景視頻

我有一個背景視頻和一些內容的容器。問題是背景視頻禁用了內容（按鈕）。禁用鏈接的背景視頻

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>

來源

2016-06-21 Sriharsha Nutalapati

只需添加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>

來源

2016-06-21 10:46:09 frnt

你的視頻畫面重疊內容。給它position: relative更高的z-index。

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

來源

2016-06-21 10:39:16

<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;"> 
...

來源

2016-06-21 10:41:10 fhollste

您的視頻是重疊的內容。

看看這個我已經更新你的垃圾箱。

Background Video

來源

2016-06-21 10:47:27

禁用鏈接的背景視頻

回答

相關問題