CSS3背景グラデーションオーバーレイHTML5ビデオ

Question

ビデオにCSS3グラデーションオーバーレイを適用したいとします。私はこれがz-indexing/stackオーダーと関係していると感じていますので、ここに私のコードがあります。

本部構造：

<div class="wrapper"> 
    <div class="gradient"> 
     <video></video> 
    </div> 
</div> 

私が使用しているCSSは、背景画像ラジアル勾配である：

.gradient { 
     background-image: 
     radial-gradient(
      circle at 36% 48%, #000000, 
      rgba(11, 39, 65, 0.32) 87%, 
      rgba(0, 0, 0, 0.0) 
     ); 
    } 

スタイリングが位置と共に勾配DIVに適用される：相対。 z指数：10;グラデーションオーバーレイをビデオにします。

グラジェントがまったく表示されない - これはどのように達成可能ですか？

Answer 1

を追加します表示されます。それは今、完全に応答することができる。その後、編集したビデオ

---

の上にdiv要素を入れてz-indexを使用しています。私は、勾配divの外にvideo要素を引っ張ってきたので、それはそれの上に表示することができます

.wrapper { 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.gradient { 
 
    background-image: radial-gradient(circle at 36% 48%, #000000, rgba(11, 39, 65, 0.32) 87%, rgba(0, 0, 0, 0.0)); 
 
    width: 100%; 
 
    height: calc(100vh - 80px); 
 
    min-height: 600px; 
 
    object-fit: cover; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
video { 
 
    position: absolute; 
 
    top: 0; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: calc(100vh - 80px); 
 
    min-height: 600px; 
 
    object-fit: cover; 
 
}

<div class="wrapper"> 
 
    <div class="gradient"> 
 
    </div> 
 
    <video><source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> </video> 
 
</div>

お知らせ：

あなたはそのように行うことができます。

希望すると助かります。

Answer 2

<div class="wrapper"> 
    <video></video> 
    <div class="gradient"> 
    </div> 
</div> 

、勾配のdivの外にビデオを移動し、今 position: absoluteとビデオの上にグラデーションを配置し、あなたが z-index: 10;を持っているので、それが適切にビデオをカバーする必要があり

。あなたが最も可能性の高いあなたが実際に.gradient固定height & widthそれがカバーするビデオコントロールを与え、彼らがクリックできない場合に実行されます。このソリューションで

問題の一つ。

Answer 3

この

がビデオに兄弟を追加してみはそのposition:absoluteを作り、あなたがであるために勾配を含むdiv要素にwidthとheightを設定する必要がありますz-index

.wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    //padding: 20px; 
 
    border-radius: 5px; 
 
    background-attachment: scroll; 
 
    overflow: hidden; 
 
} 
 
.wrapper video { 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.wrapper .overlay { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 2; 
 
    background-image: 
 
     radial-gradient(
 
      circle at 36% 48%, #000000, 
 
      rgba(11, 39, 65, 0.32) 87%, 
 
      rgba(0, 0, 0, 0.0) 
 
     ); 
 
}

<div class="wrapper"> 
 
<div class="overlay"></div> 
 
    <div class="gradient"> 
 
     <video> 
 
      //your video 
 
     </video> 
 
    </div> 
 
</div>