Bootstrap 網掛け動画を入れてみる!
概要
Bootstrapで作ったサイトに網掛け画像を入れてみる!
参考サイト
作ったもの
index.html
<style> .pattern { width: 100%; height: 100%; background: url(http://www.webcreatorbox.com/sample/images/yokojima.png); position: fixed; top: 0; left: 0; z-index: 2; } </style> ... <div class="pattern"></div> <video autoplay="" loop="" class="pattern2 fillWidth fadeIn wow collapse in" data-wow-delay="0.5s" poster="https://s3-us-west-2.amazonaws.com/coverr/poster/Traffic-blurred2.jpg" id="video-background"> <source src="https://s3-ap-northeast-1.amazonaws.com/********/hawaii.mp4" type="video/mp4"> </video>
イメージ的には、
文字 透過した網掛けの画像 背景画像
という感じでレイヤーを重ねて、網掛けをしているように見せかける。
z-indexについて
z-indexを使用するには、その要素にpositionプロパティでstatic(初期値)以外の値が適用されている必要があります。
autoを入力した場合は親要素と同じ値が設定されます。親要素でz-indexの指定がされていない場合は値は0となります。(初期値)