Material Design for Bootstrap4（その4）マスクの実装

Bootstrapを使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap」。

そのBootstrap4対応バージョン、「Material Design for Bootstrap4（以下、MDB4と表記）」のご紹介4回目です。

今回はマスクの実装について。
画像の上にマスクを掛けます。

＊Material Design for Bootstrap

＊Masks : Material Design for Bootstrap

～目次～

パターンの実装
オーバーレイの実装

パターンの実装

MBD4にて使用できるマスクは２種類。
パターンとオーバーレイです。

まずはパターンの実装から。

HTMLのコードは以下になります。
クラス名含めてワンセットになっています。

<div class="view">
    <img src="画像ファイル" class="img-fluid" alt="">
    <div class="mask pattern-X flex-center">
        <p class="white-text">画像の上の文字</p>
    </div>
</div>

クラス「pattern-X」の「X」の部分に数字を入れます。

実際の表示はデモページをご覧ください。

＊MDB4：パターン

pattern-1やpattern-2などの数字は、パターンの強度ではなくて、ただの種類分けです。数字が大きくなるとパターンが強くなるわけではありません。

ちなみに、クラス「img-fluid」「flex-center」「white-text」は必要に応じて使ってください。
以下のような意味があります。

◇img-fluid：
画像を横幅100%に合わせて表示。レスポンシブ用。

◇flex-center：
画像の上の文字を中央寄せにする

◇white-text：
文字色を白に

オーバーレイの実装

続いて、オーバーレイの実装です。

HTMLのコードは以下になります。
こちらもクラス名含めてワンセットになっています。
パターンとほぼ同じです。

<div class="view">
    <img src="画像ファイル" class="img-fluid" alt="">
    <div class="mask flex-center rgba-色-強度">
        <p class="white-text">画像の上の文字</p>
    </div>
</div>