CSS プロパティ background-blend-mode：背景の混合効果を極める

CSS プロパティ background-blend-mode

```html

CSS プロパティ background-blend-mode：背景の混合効果を極める

background-blend-mode プロパティは、背景画像を背景色や他の背景画像とどのように合成するかを定義します。これにより、二重露光効果、テクスチャの追加、色のグラデーションなど、多様な視覚効果を作り出すことができます。

1. 構文と値

background-blend-mode プロパティの構文は次のとおりです。


background-blend-mode: <blend-mode>;

<blend-mode> には、以下の混合モードキーワードのいずれかを指定します。

normal: デフォルト値。混合は行われません。
multiply: 背景画像の各ピクセルを背景色と乗算します。
screen: 背景画像の各ピクセルを背景色と反転乗算します。
overlay: 背景画像の輝度に応じて、乗算またはスクリーンを適用します。
darken: 背景画像と背景色のうち、暗い方のピクセルを選択します。
lighten: 背景画像と背景色のうち、明るい方のピクセルを選択します。
color-dodge: 背景色を背景画像で除算し、より明るい画像を作成します。
color-burn: 反転した背景画像で反転した背景色を除算し、より暗い画像を作成します。
hard-light: 背景画像の輝度に応じて、乗算またはスクリーンを適用しますが、overlayよりも強い効果があります。
soft-light: hard-lightよりもソフトな効果で、背景画像の輝度に応じて、暗くしたり明るくしたりします。
difference: 背景画像と背景色の色の違いを表します。
exclusion: differenceと似ていますが、コントラストが低くなります。
hue: 背景画像の輝度と彩度は保持したまま、背景色の色相を適用します。
saturation: 背景画像の輝度と色相は保持したまま、背景色の彩度を適用します。
color: 背景画像の輝度は保持したまま、背景色の色相と彩度を適用します。
luminosity: 背景画像の色相と彩度は保持したまま、背景色の輝度を適用します。

2. 混合モード詳細

各混合モードの効果を視覚的に確認してみましょう。

※ 上記は一部の混合モードです。その他の混合モードも試してみてください。

3. ブラウザ対応状況

background-blend-mode プロパティのブラウザ対応状況は以下のとおりです。

ブラウザ	バージョン
Chrome	35+
Firefox	30+
Safari	8+
Edge	12+
Internet Explorer	非対応

※ 詳細は Can I use を参照してください。

4. 使用例

background-blend-mode プロパティは、さまざまな視覚効果を実現するために使用できます。ここでは、いくつかの例を紹介します。

4.1. 二重露光効果


<div class="double-exposure"></div>


.double-exposure {
  width: 300px;
  height: 200px;
  background-image: url("image1.jpg"), url("image2.png");
  background-blend-mode: multiply; 
}

4.2. テクスチャの追加


<div class="textured-background"></div>


.textured-background {
  width: 300px;
  height: 200px;
  background-image: url("texture.png"), url("background.jpg");
  background-blend-mode: overlay; 
}

4.3. カラーフィルター


<div class="color-filter"></div>


.color-filter {
  width: 300px;
  height: 200px;
  background-image: url("image.jpg"), linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
  background-blend-mode: multiply; 
}

5. 注意点

background-blend-mode プロパティは、背景画像と背景色に対してのみ有効です。他の要素には影響しません。
複数の背景画像を使用する場合、background-blend-mode プロパティは各背景画像に対して個別に適用されます。
Internet Explorer は background-blend-mode プロパティをサポートしていません。IE で同様の効果を実現するには、JavaScript ライブラリを使用するか、フォールバック画像を用意する必要があります。

CSS プロパティ background-blend-mode：背景の混合効果を極める

1. 構文と値

2. 混合モード詳細

3. ブラウザ対応状況

4. 使用例

4.1. 二重露光効果

4.2. テクスチャの追加

4.3. カラーフィルター

5. 注意点

関連QA