CSS プロパティ background-blend-mode

```html

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

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 ライブラリを使用するか、フォールバック画像を用意する必要があります。

関連QA

  • Q: background-blend-mode プロパティで複数の混合モードを同時に適用できますか？
    • A: いいえ、できません。background-blend-mode プロパティには、一度に1つの混合モードしか指定できません。複数の混合モードを適用する場合は、複数の要素を重ねて配置し、それぞれの要素に異なる混合モードを適用する必要があります。
  • Q: background-blend-mode プロパティが適用されません。何が問題でしょうか？
    • A: 考えられる原因はいくつかあります。まず、ブラウザが background-blend-mode プロパティをサポートしていることを確認してください。サポートされていない場合は、JavaScript ライブラリやフォールバック画像の使用を検討してください。また、要素に背景画像と背景色が設定されていることを確認してください。設定されていない場合、background-blend-mode プロパティは効果がありません。
  • Q: 特定のブラウザで background-blend-mode プロパティの効果が異なるのはなぜですか？
    • A: background-blend-mode プロパティの実装は、ブラウザによってわずかに異なる場合があります。そのため、特定のブラウザで効果が異なる場合は、そのブラウザの最新バージョンを使用するか、異なる混合モードを試してみてください。また、必要であれば、特定のブラウザ向けの CSS を記述することで、効果を調整することもできます。

```