photoshopのように、背景や画像の色をブレンドモードのCSSで変更する方法

photoshopのように、背景や画像の色をブレンドモードのCSSで変更する方法
Advertisements

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

2つとも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つの要素を掛け合わせることがありません

Advertisements

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

1つの要素に対して、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覆い焼き :明るい色はさらに明るく重なり、画像が明るくなります。
Advertisements

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

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-modebackground-blend-mode
2つのCSSプロパティについてご紹介しました。


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

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

Advertisements