CSS 画像色重ねる

CSS 画像カラーオーバーレイ

この文章では、CSS を使用して画像にカラーオーバーレイ効果を実現する方法について詳しく解説します。rgba 透明度、擬似要素、合成モード、グラデーションなど、さまざまな方法を紹介します。

1. RGBA 透明度

RGBA カラー値は、赤 (R)、緑 (G)、青 (B) に加えて、アルファ値 (A) を使用して色の透明度を表します。アルファ値は 0.0 (完全に透明) から 1.0 (完全に不透明) までの範囲で指定します。

画像に半透明の色をオーバーレイするには、要素の背景色に rgba カラー値を設定します。例えば、画像に黒を 50% の透明度でオーバーレイするには、次のようにします。

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

.container {
  background-color: rgba(0, 0, 0, 0.5); /* 黒を50%の透明度で */
}

2. 擬似要素

:before または :after 擬似要素を使用して、画像の上にオーバーレイレイヤーを作成することもできます。擬似要素の背景色と透明度を設定することで、カラーオーバーレイ効果を実現します。

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

.container {
  position: relative; /* 擬似要素の配置に必要 */
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.3); /* 赤を30%の透明度で */
}

擬似要素の width と height プロパティを調整することで、オーバーレイレイヤーのサイズを制御できます。また、top、left、bottom、right プロパティを使用して、オーバーレイレイヤーの位置を調整することもできます。

3. 合成モード (mix-blend-mode)

mix-blend-mode プロパティを使用すると、要素とその背景の描画方法を指定できます。これにより、さまざまなカラーオーバーレイ効果を作成できます。

値	説明
multiply	背景色と要素の色を乗算します。
overlay	背景色が明るい場合は覆い焼き、暗い場合は焼き込みを実行します。
screen	背景色と要素の色を反転して乗算し、反転します。
その他	MDN Web Docs: mix-blend-mode を参照してください。

<div class="container">
  <img src="image.jpg" alt="画像">
  <div class="overlay" style="background-color: blue;"></div>
</div>

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply; /* 合成モードを指定 */
}

4. 線形グラデーション

linear-gradient 関数を使用すると、画像にカラーグラデーションのオーバーレイを作成できます。グラデーションの向き、色、透明度などを調整できます。

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

.container {
  background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), transparent); /* 上から赤から透明へのグラデーション */
}

5. まとめ

画像にカラーオーバーレイ効果を実現するには、さまざまな方法があります。それぞれの手法には、以下のような長所と短所があります。

方法	長所	短所
RGBA 透明度	簡単で、広くサポートされています。	単色のオーバーレイしかできません。
擬似要素	オーバーレイのサイズと位置を細かく制御できます。	マークアップが少し複雑になります。
合成モード	さまざまな効果を実現できます。	ブラウザのサポート状況を確認する必要があります。
線形グラデーション	グラデーションのオーバーレイを作成できます。	複雑なグラデーションを作成するには、コードが複雑になる場合があります。

最適な方法は、実現したい効果やプロジェクトの要件によって異なります。単純な単色のオーバーレイには rgba 透明度が適しています。オーバーレイのサイズや位置を細かく制御したい場合は、擬似要素を使用します。より複雑な効果を実現したい場合は、合成モードや線形グラデーションを検討してください。

QA

Q1: カラーオーバーレイの透明度を変更するにはどうすればよいですか？

A1: rgba 透明度を使用している場合は、rgba カラー値のアルファ値を調整します。擬似要素を使用している場合は、擬似要素の background-color プロパティのアルファ値を調整します。合成モードを使用している場合は、オーバーレイ要素の不透明度を調整します。

Q2: カラーオーバーレイを特定の領域にのみ適用するにはどうすればよいですか？

A2: 擬似要素を使用し、そのサイズと位置を調整することで、カラーオーバーレイを特定の領域にのみ適用できます。また、画像を編集ソフトウェアで加工し、オーバーレイを適用したい領域にのみ透明な部分を作成することもできます。

Q3: 複数のカラーオーバーレイ効果を組み合わせることはできますか？

A3: はい、複数のカラーオーバーレイ効果を組み合わせることができます。例えば、擬似要素を使用して単色のオーバーレイを作成し、さらに mix-blend-mode プロパティを使用して合成モードを適用することができます。ただし、組み合わせる効果によっては、意図したとおりに表示されない場合があります。そのため、事前にテストを行い、期待どおりに機能することを確認することをお勧めします。

その他の参考記事:CSS画像の透明/不透明