CSS プロパティ mix-blend-mode: 要素と背景、他の要素との混合方法を制御する

CSS プロパティ mix-blend-mode

mix-blend-mode CSS プロパティは、要素のコンテンツが、要素の直接の背景および要素の背後にあるレイヤーのコンテンツとどのように混合されるかを記述します。これにより、画像の二重露光効果や、背景画像とテキストのブレンドなど、視覚的に魅力的な効果を作成できます。

1. 構文と値

mix-blend-mode プロパティは、以下の値を取ります。

normal: デフォルト値。ブレンドモードを適用しません。
multiply: 正片叠底。結果の色は、2つの色の値を掛け合わせたものになります。
screen: スクリーン。2つの画像を同じスクリーンに投影したような効果になります。
overlay: オーバーレイ。ベースの色に応じて、乗算またはスクリーンが適用されます。
darken: 暗くする。2つの色のうち、暗い方の色が選択されます。
lighten: 明るくする。2つの色のうち、明るい方の色が選択されます。
color-dodge: カラー比較（覆い焼き）。ベースの色をブレンドカラーで明るくします。
color-burn: カラー比較（焼き込み）。ベースの色をブレンドカラーで暗くします。
hard-light: ハードライト。オーバーレイと似ていますが、ブレンドカラーが反転されます。
soft-light: ソフトライト。ハードライトよりもソフトな効果になります。
difference: 差の絶対値。2つの色の違いが大きいほど、明るい色になります。
exclusion: 除外。差の絶対値と似ていますが、コントラストが低くなります。
hue: 色相。ベースの彩度と輝度を維持し、ブレンドカラーの色相を適用します。
saturation: 彩度。ベースの輝度と色相を維持し、ブレンドカラーの彩度を適用します。
color: カラー。ベースの輝度を維持し、ブレンドカラーの色相と彩度を適用します。
luminosity: 輝度。ベースの色相と彩度を維持し、ブレンドカラーの輝度を適用します。

コード例:


.example {
  mix-blend-mode: multiply; 
}

2. よく使われる混合モードの詳細

ここでは、いくつかのよく使用される混合モードとその効果について詳しく説明します。

2.1 normal

normal はデフォルト値で、ブレンドは適用されません。要素は、背景画像や他の要素に関係なく、通常の方法で表示されます。

2.2 multiply

multiply は、2つの色を掛け合わせて新しい色を作成します。これは、影を作成したり、画像を暗くしたりする場合に便利です。

2.3 screen

screen は、2つの色を加算して新しい色を作成します。これは、画像を明るくしたり、ハイライトを作成したりする場合に便利です。

2.4 overlay

overlay は、ベースの色に応じて multiply または screen を適用します。ベースの色が明るい場合は multiply が、暗い場合は screen が適用されます。これは、画像のコントラストを高める場合に便利です。

2.5 darken

darken は、2つの色のうち暗い方の色を選択します。これは、影を作成したり、画像を暗くしたりする場合に便利です。

2.6 lighten

lighten は、2つの色のうち明るい方の色を選択します。これは、ハイライトを作成したり、画像を明るくしたりする場合に便利です。

**(その他のよく使用されるモードについても、上記のように簡潔な説明と図を追加してください。)**

3. ブラウザの互換性

mix-blend-mode プロパティは、ほとんどの最新のブラウザでサポートされています。ただし、古いブラウザではサポートされていない場合があります。以下の表は、主要なブラウザでのサポート状況を示しています。

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

最新のブラウザの互換性情報については、Can I use を参照してください。

4. 使用シーンと注意点

mix-blend-mode プロパティは、以下のような場合に使用できます。

画像の二重露光効果の作成
背景画像とテキストのブレンド
ホバー効果の作成
その他、視覚的に魅力的な効果の作成

mix-blend-mode プロパティを使用する際の注意点として、以下の点があります。

パフォーマンスへの影響: mix-blend-mode プロパティは、特にモバイルデバイスにおいて、パフォーマンスに影響を与える可能性があります。大量の要素に mix-blend-mode プロパティを使用する場合は、パフォーマンスに注意してください。
アクセシビリティ: mix-blend-mode プロパティを使用すると、視覚的に魅力的な効果を作成できますが、アクセシビリティに配慮する必要があります。色のコントラスト比に注意し、すべての人がコンテンツにアクセスできるようにしてください。

HTML コード例 (いくつかの一般的なモード):


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>mix-blend-mode の例</title>
  <style>
    .container {
      position: relative;
      width: 300px;
      height: 200px;
    }

    .image {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      color: white;
    }

    .multiply { 
      mix-blend-mode: multiply; 
    }
    .screen { 
      mix-blend-mode: screen; 
    }
    /* 他のモードのスタイル */
  </style>
</head>
<body>

  <div class="container">
    <img src="image1.jpg" alt="画像 1" class="image">
    <div class="text multiply">重ね合わせテキスト</div>
  </div>

  <div class="container">
    <img src="image2.jpg" alt="画像 2" class="image">
    <div class="text screen">重ね合わせテキスト</div>
  </div>

</body>
</html>

注: 上記は単なる例です。必要に応じて、画像のアドレス、テキストの内容、スタイルなどを変更したり、他の混合モードの例を追加したりすることができます。

CSS プロパティ mix-blend-mode: 要素と背景、他の要素との混合方法を制御する

1. 構文と値

コード例:

2. よく使われる混合モードの詳細

2.1 normal

2.2 multiply

2.3 screen

2.4 overlay

2.5 darken

2.6 lighten

3. ブラウザの互換性

4. 使用シーンと注意点

HTML コード例 (いくつかの一般的なモード):

関連するQ&A