乗算やオーバーレイなど、背景や画像の色をCSSで変更する方法

photoshop やIllustratorのファイルでは昔からおなじみの、
「乗算」「オーバーレイ」など複数レイヤーの掛け合わせ方(ブレンド)について、
ブレンドモードをWEBでも再現するためのCSSプロパティ、
mix-blend-modeとbackground-blend-modeの使い方をまとめてみました。

どちらもIE以外は広く主要ブラウザでのサポートがされているため、使いやすく、
デザインカンプを再現する際の、表現の幅がより広がると思います！

Mix-blend-modeとは？

Mix-blend-modeとは、要素が、重なった親要素や背景とどう掛け合わせるか？
を指定するCSSプロパティです。

Mix-blend-modeの基本的な使い方

上にある重ねたい要素に対して、下記のように、mix-blend-mode: 〜;のプロパティを指定します。

画像をオーバーレイで重ねる例

    <div class="aa common-size">
      <img class="aa__content" src="image/icon.svg" />
    </div>

.common-size{
    width: 300px;
    height:300px;  /* こちらは以下共通 */
}

.aa {
  position: relative;
  background: url(../image/bg.jpg) no-repeat center/cover;
}
.aa__content {
  position: absolute; /* 位置を指定 */
  top: 10%;
  left: 10%;
  max-width: 100px;
  height: auto;
  mix-blend-mode: overlay; /* 重ね方を指定 */
}

文字をオーバーレイで重ねる例

    <div class="bb common-size">
      <p class="bb__content">ABC</p>
    </div>

.bb {
  position: relative;
  background: url(../image/bg.jpg) no-repeat center/cover;
}
.bb__content {
  position: absolute; /* 位置を指定 */
  top: 10%;
  left: 10%;
  font-size: 6rem;
  font-weight: bold;
  color: white;
  mix-blend-mode: overlay; /* 重ね方を指定 */
}

Background-blend-modeとは?

Background-blend-modeとは、背景(背景色、もしくは背景画像)を、
どう掛け合わせるかを指定するためのCSSプロパティです。

Background-blend-modeとMix-blend-modeの違いは？

Background-blend-modeは1つの要素に対してどうブレンドするかを決めるプロパティのため、mix-blend-modeのように、2つの要素を掛け合わせることがありません。

Background-blend-modeの基本的な使い方

１つの要素に対して、2つのbackground(色や背景画像)を指定しておきます。
同時に、background-blend-mode: 〜;のプロパティを指定します。

 <div class="cc common-size"></div>

.cc{
    background:  url(../image/bg.jpg) no-repeat center / cover #ffff00;
    background-blend-mode:darken;
}

よくあるような、背景画像に黒を載せたり、逆に白を載せて明るくすることも、このプロパティで簡単に変更することが可能です。

背景画像に黒を載せる方法

.cc{
    background:  url(../image/bg.jpg) no-repeat center / cover rgba(0,0,0,0.5);
    background-blend-mode:darken;
}

背景画像に白を載せて明るくする方法

.cc{
    background:  url(../image/bg.jpg) no-repeat center / cover rgba(255,255,255,0.5);
    background-blend-mode:lighten;
}

CSSのブレンドモードの種類一覧

ブレンドモードの値は、mix-blend-modeとbackground-blend-modeどちらも、
ブレンドなしの初期値:normalと合わせて、16種あります。
実際に画像に同じ色を掛け合わせ、
ブレンド方法によってどのように表示が異なるか、一覧をまとめてみました。

重ねると暗くなるブレンドモード値

Multiply	乗算:CMYKと同じように、重ねるとより暗くなります。
Darken	比較（暗）:重ねた色を比較して、暗い色の方(RGBの個別の値の暗い方)を適用します。
Color-burn	焼き込み:暗い色はさらに暗く重なって、濃くなります。

重ねると明るくなるブレンドモード値

Screen	スクリーン:RGBと同じように、重ねるとより明るくなります。
Lighten	比較（明）:重ねた色を比較して、明るい色の方(RGBの個別の値の明るい方)を適用します。
Color-dodge	覆い焼き :明るい色はさらに明るく重なり、画像が明るくなります。

コントラストをつけるブレンドモード値

Overlay	オーバーレイ:下の色が暗い場合はより暗く、明るい場合はより明るくなります。
Hard-light	ハードライト:合成した色が明るい色なら、スクリーン状態で明るく。 暗い色なら、乗算状態で暗くなります。
Soft-light	ソフトライト:合成した色が明るい色なら、覆い焼き状態で明るく。 暗い色なら、焼き込み状態で暗くなります。

反転させるブレンドモード値

Difference	差の絶対値:重ねた色を比較して、明るさの大きい色から小さい色を取り除きます。白とあわせる場合は反転し、黒とあわせる場合変化はありません。
Exclusion	除外:差の絶対値と似ていて、かつ、差の絶対値よりは、コントラストが弱くなります。

色相・彩度・輝度に関するブレンドモード値

Hue	色相 :下の色の輝度と彩度に、上の色の色相を適用します。
Color	カラー: 下の色の輝度に、上の色の色相と彩度を適用します。
Saturation	彩度:下の色の輝度と色相に、上の色の彩度を適用します。
Luminosity	輝度 :下の色の色相と彩度に、上の色の輝度を適用します。

正直、よく画像を加工するのに使うのは
Multiply(乗算)やScreen(スクリーン)、Overlay(オーバーレイ)あたりな気もしますが、
色々値を変更してみると、意外にマッチする組み合わせもあるので探してみるのも楽しいと思います！

ブレンドモードのテキストが透けるのを防ぐ方法

例えば文字は色ベタ&画像にブレンドモードを使いたい場合、
下記のように、文字がブレンドモードを効かせた要素内にあると、文字まで透過してしまいます。

  <div class="container">
      <p><img src="./image/bg.jpg" alt="" /></p>
      <div class="container__darken">
        <h3 class="heading">TEXT</h3>
      </div>
    </div>

.container {
  position: relative;
  max-width: 600px;
  height: auto;
}
.container__darken {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #ec50e4;
  mix-blend-mode: darken;
}
.heading {
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px;
  color: #ffffff;
  font-weight: bold;
  font-size: 5rem;
}

文字がブレンドをかけている要素の中にあると、子要素まで影響するため、
文字の箇所はブレンドモードの範囲外に出してあげることで、文字を色ベタにします。

    <div class="container">
      <p><img src="./image/bg.jpg" alt="" /></p>
      <div class="container__darken"></div>
      <h3 class="heading">TEXT</h3>
    </div>

まとめ

photoshopのように、背景や画像、色の重ねた部分の重なり具合を変えるための
mix-blend-modeとbackground-blend-mode、
２つのCSSプロパティについてご紹介しました。

少し暗くしたり明るく調整したい、ということはwebデザインでよく使われる例なので、数行付け足すことで簡単に再現できるこのプロパティは、効果的に使っていきたいと思います！

最後までご覧いただき、ありがとうございました。