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

2024年10月17日2025年11月24日

※この記事には広告が含まれています

こんにちは！キャメルコードブログのしゅんです！

今回はCSSを使って画像にマスクをかける方法について解説していきます。

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

photoshopなどの画像編集ソフトを使えば画像を加工することができますが、このように感じることもあるのではないでしょうか。

こんなとき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); 
}