CSS「background-blend-mode」：影、重ね合わせ、調和…魔法の技術でデザインを昇華

「background-blend-mode」の基礎知識

このプロパティの値には、以下の2種類があります。

• スクリーン（screen）
  要素の色を背景色から明るくします。明るい色合いを重ねたい場合に役立ちます。
• 乗算（multiply）
  要素の色を背景色と乗算し、暗い色合いになります。影や奥行きのある表現に最適です。

上記以外にも、「lighten」、「darken」、**「difference」**など、様々なブレンドモードが用意されています。それぞれ異なる効果を生み出すので、目的やデザインに合わせて使い分けることが重要です。

実用的な例

例1：影のエフェクト

background-blend-mode: multiply; を使って、要素に影のようなエフェクトを簡単に追加できます。黒い要素を明るい背景に配置すれば、自然な影を表現できます。

例2：2つの画像を重ねたようなエフェクト

半透明の画像を2枚重ねて、奥行きのある表現を作り出すことができます。それぞれの画像の 「background-blend-mode」 を調整することで、様々な効果を表現できます。

例3：文字と背景の調和

暗い背景に白い文字を使用する場合、「mix-blend-mode」 を使って文字の色を自動的に調整できます。背景色に合わせて文字色が変化するため、読みやすく美しいデザインになります。

• 「mix-blend-mode」 は、要素内の要素同士のブレンドにも適用できます。
• 複数の背景画像を使用する場合、それぞれの画像に 「background-blend-mode」 を設定できます。重ねる順番によって、効果が変化します。
• 「background-blend-mode」 は、比較的新しいプロパティなので、すべてのブラウザで完全対応しているわけではありません。必要に応じて、ベンダープレフィックスを忘れずに記述しましょう。

---

.shadow {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒色 */
  background-blend-mode: multiply; /* 乗算モード */
  width: 200px;
  height: 100px;
  text-align: center;
  color: white; /* 白いテキスト */
}

このコードは、黒い影付きのボックスを作成します。

2つの画像を重ねたようなエフェクト

.image1 {
  background-image: url("image1.jpg");
  background-blend-mode: color; /* 色モード */
  width: 300px;
  height: 200px;
}

.image2 {
  background-image: url("image2.jpg");
  background-blend-mode: screen; /* スクリーンモード */
  width: 300px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

このコードは、2つの画像を半透明で重ね合わせます。「image1.jpg」 は 「color」 モードで、「image2.jpg」 は 「screen」 モードでブレンドされます。

文字と背景の調和

.text {
  background-color: #333; /* 濃いグレー */
  color: white; /* 白いテキスト */
  background-blend-mode: color; /* 色モード */
  padding: 20px;
}

このコードは、暗い背景に白い文字を配置し、自動的に文字の色を調整します。

• 以下のコードは、「background-blend-mode」 を様々な値に設定した例です。

.blend-multiply {
  background-blend-mode: multiply;
}

.blend-screen {
  background-blend-mode: screen;
}

.blend-overlay {
  background-blend-mode: overlay;
}

.blend-darken {
  background-blend-mode: darken;
}

.blend-lighten {
  background-blend-mode: lighten;
}

.blend-color-dodge {
  background-blend-mode: color-dodge;
}

.blend-color-burn {
  background-blend-mode: color-burn;
}

.blend-hard-light {
  background-blend-mode: hard-light;
}

.blend-soft-light {
  background-blend-mode: soft-light;
}

.blend-difference {
  background-blend-mode: difference;
}

.blend-exclusion {
  background-blend-mode: exclusion;
}

.blend-hue {
  background-blend-mode: hue;
}

.blend-saturation {
  background-blend-mode: saturation;
}

.blend-color {
  background-blend-mode: color;
}

.blend-luminosity {
  background-blend-mode: luminosity;
}

• 以下のコードは、複数の背景画像に 「background-blend-mode」 を設定した例です。

.container {
  background-image: url("image1.jpg"), url("image2.jpg");
  background-repeat: no-repeat;
  background-position: 0% 0%, 100% 0%; /* 2つの画像を左右に並べる */
  background-blend-mode: multiply, screen; /* それぞれの画像に別々のブレンドモードを設定 */
}

• 「background-blend-mode」 は、比較的新しいプロパティなので、すべてのブラウザで完全対応しているわけではありません。必要に応じて、ベンダープレフィックスを忘れずに記述しましょう。
• 上記のコードはあくまで例であり、実際のデザインに合わせて調整する必要があります。

---

画像処理

「background-blend-mode」 で実現したい効果を、事前に画像処理ソフトで作成しておきます。Photoshopなどの画像編集ソフトで、レイヤーを重ねてブレンド効果を適用することで、「background-blend-mode」 と同様の効果を得ることができます。作成した画像を背景画像として設定することで、古いブラウザでも同様のデザインを表現できます。

SVGフィルター

SVGフィルターを使用して、「background-blend-mode」 のような効果を再現する方法もあります。ただし、SVGフィルターは**「background-blend-mode」** よりも複雑で、すべての効果を再現できるわけではありません。

fallback

新しいブラウザでは**「background-blend-mode」** を使用し、古いブラウザでは別のデザインを適用する**「fallback」**という方法もあります。CSSの @supports メディアクエリを使用して、ブラウザごとに異なるスタイルを適用することができます。

@supports (background-blend-mode: multiply) {
  .element {
    background-blend-mode: multiply;
  }
}

@supports not (background-blend-mode: multiply) {
  .element {
    background-image: url("image.jpg"); /* 代替画像 */
  }
}

ライブラリ

「background-blend-mode」 の代替となるライブラリもいくつか開発されています。これらのライブラリは、JavaScriptを使用して**「background-blend-mode」** のような効果を再現します。

これらのライブラリを使用する場合は、パフォーマンスやブラウザ互換性などの点を考慮する必要があります。

上記の代替方法以外にも、デザインの目的や状況に応じて、様々な方法が考えられます。例えば、シンプルなグラデーションであれば、CSSの linear-gradient や radial-gradient プロパティを使用して表現することもできます。