HTMLとCSSで実現！画像にマスクをかける方法について解説！

2024年10月17日2024年12月11日

画像をもう少し暗くしたいな…

こんなときphotoshopなどの画像編集ソフトを使えば画像を加工することができます。

でも

画像編集ソフトで加工するのはちょっと手間に感じる
もっと手軽に画像の雰囲気を変えたい、明暗を調節したい

このように感じることもあるのではないでしょうか。

こんなとき画像にマスクをかけることで画像の色味を変更したり明暗を変えることができます。

今回はHTMLとCSSだけで画像にマスクをかける方法について解説をしていきます！

マスクをかける方法

疑似要素を利用

この方法を知っているだけで、背景やサイトの雰囲気に合わせて画像に変化を加えることができます。

ちょっとした画像の加工に使えるテクニックなのでぜひマスターしてくださいね！

今回の記事でできるようになること

画像編集ソフトを使うことなくHTMLとCSSだけで画像にマスクをかけることができるようになる

最後まで読んで、ぜひ実践してみてくださいね^^

それでは早速解説をしていきます！

疑似要素を利用

疑似要素を使っていきましょう。

今回は画像を暗くするために黒いマスクをかける例を見ていきます。

参考コードは以下。

-- HTML --

<div class="image-container">
  <img src="image.jpg" alt="猫の画像">
</div>

-- CSS --

.image-container {
  position: relative;
}

.image-container img {
  display: block;
  width: 100%; 
  max-width: 100%;
}

.image-container::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* マスクの色と透明度 */
}

上記コードについて順番に見ていきましょう。

疑似要素のbeforeを使いコンテンツを生成する
insetプロパティを使い画面全体に広げる
background-colorでマスクの色を指定する

1. beforeを使いコンテンツを生成する

まずは疑似要素のbeforeを使いコンテンツを生成します。

主な疑似要素として以下2つは覚えておきましょう！

before
after

上記コードではbeforeを使いコンテンツを生成し、幅と高さを100%に設定して親要素いっぱいに広げています。

2. insetプロパティを使い画面全体に広げる

insetはtop、right、bottom、leftを一括指定できるCSSプロパティです。

上記コードではinsetを0に指定して親要素の上にピッタリ被さるようにしています。

「inset:0;」は以下のように書き換えることもできますね^^

-- CSS --

.image-container::before {
  /* inset: 0; */ 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

3. background-colorでマスクの色を指定する

コンテンツに背景色をつけてマスクの色を指定していきます。

今回の例では黒いマスクを被せたいので以下のようなコードになりますね^^

-- CSS --

.image-container::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
}