CSSの魔法：background-blend-modeでデザインをレベルアップ

CSSのブレンドモード：background-blend-mode

background-blend-mode は、要素の背景画像と背景色、または複数の背景画像同士をどのように混合するかを制御する CSS プロパティです。 Photoshop などの画像編集ソフトでいう「描画モード」に相当します。

使い方

background-blend-mode は以下の要素に適用できます。

• 要素の背景 (background)
• 要素内の子要素 (mix-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 を使用して、背景画像と背景色を混合しています。

/* 背景画像と背景色を乗算で混合 */
.element {
  background-image: url(image.jpg);
  background-color: #ff0000;
  background-blend-mode: multiply;
}

応用例

background-blend-mode は、さまざまなデザイン効果を作成するために使用できます。

• 画像を暗くしたり明るくしたりする
• 画像の色合いを変更する
• 複数の画像を重ねて複雑な模様を作成する
• テキストと背景画像をなじませる

注意点

• background-blend-mode はすべてのブラウザでサポートされているわけではありません。
• 複雑なブレンドモードを使用すると、パフォーマンスが低下する場合があります。

CSS background-blend-mode サンプルコード

画像と背景色の混合

<div class="element"></div>

CSS

.element {
  background-image: url(image.jpg);
  background-color: #ff0000;
  height: 200px;
  width: 200px;
}

/* さまざまなブレンドモードを試す */
.element-1 { background-blend-mode: multiply; }
.element-2 { background-blend-mode: screen; }
.element-3 { background-blend-mode: overlay; }
.element-4 { background-blend-mode: darken; }
.element-5 { background-blend-mode: lighten; }

結果

5つの要素がそれぞれ異なるブレンドモードで表示されます。

複数の画像を重ねる

HTML

<div class="element">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
</div>

CSS

.element {
  position: relative;
  height: 200px;
  width: 200px;

  /* 画像を並べる */
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* さまざまなブレンドモードを試す */
  .element-1 { background-blend-mode: multiply; }
  .element-2 { background-blend-mode: screen; }
  .element-3 { background-blend-mode: overlay; }
  .element-4 { background-blend-mode: difference; }
  .element-5 { background-blend-mode: exclusion; }
}

結果

2つの画像がそれぞれ異なるブレンドモードで重ねて表示されます。

テキストと背景画像をなじませる

HTML

<div class="element">
  <h1>タイトル</h1>
</div>

CSS

.element {
  background-image: url(image.jpg);
  background-color: #ffffff;
  height: 200px;
  width: 200px;

  /* テキストを中央に配置 */
  h1 {
    text-align: center;
    color: #ffffff;
  }

  /* さまざまなブレンドモードを試す */
  .element-1 { background-blend-mode: multiply; }
  .element-2 { background-blend-mode: screen; }
  .element-3 { background-blend-mode: overlay; }
  .element-4 { background-blend-mode: color; }
  .element-5 { background-blend-mode: luminosity; }
}

結果

テキストと背景画像がそれぞれ異なるブレンドモードでなじんで表示されます。

以下、background-blend-mode の代替方法をいくつかご紹介します。

filter プロパティは、画像にさまざまな効果を適用するために使用できます。 いくつかのフィルターは、background-blend-mode と似た効果を実現できます。

例:

.element {
  background-image: url(image.jpg);
  background-color: #ff0000;
  height: 200px;
  width: 200px;

  /* 乗算効果 */
  .element-1 {
    filter: hue-rotate(90deg);
  }

  /* スクリーン効果 */
  .element-2 {
    filter: brightness(150%);
  }

  /* オーバーレイ効果 */
  .element-3 {
    filter: contrast(150%);
  }
}

@media クエリを使用して、ブラウザのサポート状況に応じて異なるスタイルを適用できます。

例:

.element {
  background-image: url(image.jpg);
  background-color: #ff0000;
  height: 200px;
  width: 200px;

  /* `background-blend-mode` をサポートするブラウザ */
  @media (prefers-reduced-motion: no-preference) {
    background-blend-mode: multiply;
  }

  /* `background-blend-mode` をサポートしないブラウザ */
  @media (prefers-reduced-motion: reduce) {
    filter: hue-rotate(90deg);
  }
}

JavaScript を使用して、画像を動的に混合することもできます。

例:

<div class="element"></div>

.element {
  height: 200px;
  width: 200px;
}

const canvas = document.querySelector('.element');
const ctx = canvas.getContext('2d');

const image1 = new Image();
image1.src = 'image1.jpg';

const image2 = new Image();
image2.src = 'image2.jpg';

image1.onload = function() {
  ctx.drawImage(image1, 0, 0);
};

image2.onload = function() {
  // 乗算効果
  ctx.globalCompositeOperation = 'multiply';
  ctx.drawImage(image2, 0, 0);
};

各方法のメリットとデメリット