CSSのbackground-blend-modeで複数の背景画像や背景色を合成し、デザイン効果を高める方法をわかりやすく解説

2024.09.14
スポンサーリンク

background-blend-modeプロパティは、複数の背景画像や背景色を重ねた際に、それらの合成方法を指定するために使用されます。合成される各要素の見た目が、指定したブレンドモードに基づいて変化します。

スポンサーリンク

background-blend-modeの値とその効果の一覧

  • normal: デフォルトのブレンドモード。背景画像が通常の方法で描画されます。
  • multiply: 背景が掛け算され、暗くなります。
  • screen: 背景が明るくなります。
  • overlay: 乗算とスクリーンを組み合わせ、強調された効果が得られます。
  • darken: 明るい部分が暗くなります。
  • lighten: 暗い部分が明るくなります。
  • color-dodge: 色のドッジ処理がされ、より明るい結果になります。
  • color-burn: 色の焼き込み処理がされ、より暗くなります。
  • hard-light: ハードライト効果が適用されます。
  • soft-light: ソフトライト効果が適用されます。
  • difference: 差分が表示されます。
  • exclusion: 排他ブレンドが適用されます。
  • hue: 色相のブレンドが適用されます。
  • saturation: 彩度のブレンドが適用されます。
  • color: 色のブレンドが適用されます。
  • luminosity: 輝度のブレンドが適用されます。

注意点と関連情報

background-blend-modeは、複数の背景を設定している場合にのみ効果を発揮します。通常、背景画像と背景色の両方を指定している場合や、複数の背景画像を使用している場合に使用します。

background-blend-modeが効かない理由として考えられること

複数の背景レイヤーが設定されていない

background-blend-modeは、複数の背景レイヤーが設定されている場合に、それらをブレンドするプロパティです。背景が1つしか設定されていない場合、このプロパティは機能しません。
対策：background-imageで複数の背景を設定するか、複数の背景色と画像を組み合わせて設定します。

ブラウザの互換性の問題

background-blend-modeは、古いブラウザではサポートされていない場合があります。特に、モバイルブラウザや特定のバージョンではこのプロパティが正しく機能しないことがあります。
対策：最新のブラウザを使用しているか確認し、必要に応じてベンダープレフィックス（例：-webkit-background-blend-mode）を追加して互換性を確保します。

背景の重ね順が原因で効果が見えない

background-blend-modeの効果は、背景レイヤーの順序や重ね方(z-index)に影響されます。レイヤーの順序によってブレンド効果が期待通りに見えないことがあります。
対策：背景レイヤーの順序や設定を見直し、効果が正しく現れるように調整します。また、透明度や色の設定も適切に調整します。

共通するCSSコード

.css-sample-container {
  width: 300px;
  height: 300px;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.css-sample-box {
  width: 100%;
  height: 100%;
  background-image: url('https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg'), 
  linear-gradient(45deg, rgba(255,0,0,0.5), rgba(0,0,255,0.5));
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

background-blend-mode: normal

背景のブレンドが適用されていない状態です。

HTMLコード

<div class="css-sample-container blend-normal">
  <div class="css-sample-box">Normal</div>
</div>

CSSコード

.blend-normal .css-sample-box {
  background-blend-mode: normal;
}

表示結果

Normal

background-blend-mode: multiply

背景が掛け算され、暗くなります。

HTMLコード

<div class="css-sample-container blend-multiply">
  <div class="css-sample-box">Multiply</div>
</div>

CSSコード

.blend-multiply .css-sample-box {
  background-blend-mode: multiply;
}

表示結果

Multiply

background-blend-mode: difference

背景の差分が表示される。

HTMLコード

<div class="css-sample-container blend-difference">
  <div class="css-sample-box">Difference</div>
</div>

CSSコード

.blend-difference .css-sample-box {
  background-blend-mode: difference;
}

表示結果

Difference

まとめ

  • background-blend-modeは、複数の背景画像や背景色を合成する際に使用されます。
  • ブレンドモードにはさまざまな種類があり、それぞれ異なる効果を提供します。
  • 複数の背景画像や色を重ねた場合にのみ効果を発揮します。
スポンサーリンク