Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Bootstrap 網掛け動画を入れてみる!

概要

Bootstrapで作ったサイトに網掛け画像を入れてみる!

参考サイト

www.creative-web.co.jp

www.webcreatorbox.com

techacademy.jp

作ったもの

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となります。(初期値)