CSSのmix-blend-modeで重なり方を制御し、デザイン効果を高める方法をわかりやすく解説

2024.09.14
スポンサーリンク

mix-blend-modeプロパティは、要素の背景色や背景画像とその上に重なる要素の描画モードを指定するためのCSSプロパティです。このプロパティを使うことで、重ねた要素同士がどのように合成されるかを指定できます。

スポンサーリンク

mix-blend-modeプロパティの値とその効果の一覧

  • multiply – 背景と要素を掛け合わせて暗くする効果があります。
  • screen – 背景と要素を掛け合わせて明るくする効果があります。
  • overlay – 背景と要素をオーバーレイしてコントラストを強調します。

注意点や関連情報

mix-blend-modeは、要素が他の背景色や画像とどのように合成されるかを定義するために使用されますが、使用する際には、ブラウザ互換性やパフォーマンスに注意が必要です。特に多くの要素に対してブレンドモードを適用すると、レンダリングに影響を与える可能性があります。

mix-blend-modeが効かない時の原因と対策

z-indexやpositionの影響

mix-blend-modeを使用している要素が他の要素に対してz-indexやpositionプロパティで制御されている場合、意図したブレンド効果が発揮されないことがあります。

対策: z-indexやpositionを確認し、適切に設定することで、要素が重なってブレンド効果が期待通りに反映されるように調整します。

isolationプロパティが設定されている

親要素にisolation: isolateが設定されている場合、子要素に適用されたmix-blend-modeが他の要素とブレンドされないことがあります。

対策: isolationプロパティを確認し、必要に応じてisolation: autoに変更して、ブレンドモードが正しく反映されるようにします。

コンテキストや描画順序の影響

mix-blend-modeは、要素の描画順序やコンテキストに依存するため、要素の順番や描画スタイルによって期待した効果が得られない場合があります。

対策: 要素の描画順序やコンテキストを確認し、要素が正しい順番で描画されるようにレイアウトやCSSを調整します。

共通するCSSコード

.css-sample-container {
      width: 100%;
      margin: 20px 0;
      display: flex;
      justify-content: center;
    }

    .css-sample-item {
      width: 300px;
      height: 300px;
      background-image: url('https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg');
      background-size: cover;
      margin: 10px;
      position: relative;
    }

    .css-sample-overlay {
      width: 100%;
      height: 100%;
      background-color: rgba(255, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
    }

元の画像は以下の画像となります。

mix-blend-mode: multiply;

背景画像と重なった要素が掛け合わせられ、暗く表示されます。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item">
        <div class="css-sample-overlay css-sample-blend-multiply"></div>
      </div>
    </div>

CSSコード

.css-sample-blend-multiply {
      mix-blend-mode: multiply;
    }

表示結果

mix-blend-mode: screen;

背景画像と要素が合成され、明るく表示されます。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item">
        <div class="css-sample-overlay css-sample-blend-screen"></div>
      </div>
    </div>

CSSコード

.css-sample-blend-screen {
      mix-blend-mode: screen;
    }

表示結果

mix-blend-mode: overlay;

背景画像と要素がオーバーレイされ、コントラストが強調されます。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item">
        <div class="css-sample-overlay css-sample-blend-overlay"></div>
      </div>
    </div>

CSSコード

.css-sample-blend-overlay {
      mix-blend-mode: overlay;
    }

表示結果

まとめ

  • mix-blend-modeプロパティは、背景と重なった要素の合成方法を指定します。
  • 代表的な値としてmultiply、screen、overlayがあり、それぞれ異なる合成効果を提供します。
  • 使用する際には、ブラウザの互換性やパフォーマンスに注意が必要です。
スポンサーリンク