MENU

【コーディング】CSSで画像にマスクをつける方法

コーディング
2021年12月30日

こんにちは！よっぴです。
今回はCSSで画像にマスクをつける方法を紹介します。

画像の差し替えのたびにデザインソフトでマスクをつけていて面倒くさいんだよね〜。ソフトとか使用せずに簡単にマスクを作りたい！

こんな方におすすめの記事です。
すぐ理解できますのでぜひやってみましょう！

目次

CSSでマスクを実装

完成品

See the Pen Untitled by yoppi (@yoppi) on CodePen.

コピペだけしたい人はここからコピーすると実装できます。
こちらを解説していきますね！

擬似要素でマスクを作成

.img-box::before{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height:inherit;
  background-color:rgba(0, 0, 0, .4);
  z-index:1

マスク部分は擬似要素で作成します。
position:absoluteで浮かせてあげて画像の上に乗せてあげるイメージです。

補足：文字も入れたい場合

See the Pen Untitled by yoppi (@yoppi) on CodePen.

メインビューなどはh1タイトルやコピーなど文章もはいることもあります。
そのときはz-indexを使用して階層を設定してあげる必要があります。

上→テキスト
中→マスク
下→画像

👆の順番にしてあげれば完成です。

私も独学でデザインカンプから画像書き出しするときマスクがついていることに気づかずそのまま画像だけ表示させて
完成させていたので、案外気づいていない人は多いのではないでしょうか？
この機会にぜひ実践してみてください！

今後もみなさんのお役に立つ記事を作成していきます。
ありがとうございました。

コーディング
  • URLをコピーしました！
目次