2017年7月25日

デザイン

CSS mix-blend-modeとbackground-blend-modeの違いと使い方

background-blend-mode CSS mix-blend-mode

はじめに

本記事ではCSSのプロパティ、「mix-blend-mode」と「background-blend-mode」についてご紹介します。
「mix-blend-mode」と「background-blend-mode」はそれぞれ画像、背景画像や色を合成するときに使うプロパティですが、どういうときにどちらのプロパティを使えばいいのか、混乱することがあるので、今回の記事でその違いや使い方についてもご紹介します。

CSS blend modes

CSSブレンドモードとはブラウザ上で画像にオーバーレイ効果をかける方法です。
もともとデザイナーはPhotoshopなど画像ソフトを使い画像にオーバーレイなどのエフェクトをかけていたのですが、CSS blend modeの導入によりブラウザ上でもこれが実現可能になりした。

CSS blend modesには background-blend-mode という背景色と背景画像をブレンドするプロパティとmix-blend-modeという要素と要素 (例えば画像とdivなど) をブレンドするプロパティがあります。

使い分けとしては、画像の場合は
mix-blend-mode , 背景画像を使いたい場合は background-blend-mode を使ってください。

対応ブラウザ

background-blend-modeの対応ブラウザは以下のようになっています。

Can I Use css-backgroundblendmode? Data on support for the css-backgroundblendmode feature across the major browsers from caniuse.com.

同じようにmix-blend-modeの対応ブラウザはこちらです。

Can I Use css-mixblendmode? Data on support for the css-mixblendmode feature across the major browsers from caniuse.com.

両方とも、2018年8月時点では、Firefox, Chromeの２つのブラウザではサポートされていますが、IE,Edgeでは未対応です。

特にIEではサポートされていなくても、Edgeではサポートされていると勘違いされている方もいらっしゃるのでご注意ください。

そのほか、Safariでは部分的にサポートされています。
hue, saturation, color, luminosity などのモードは対応していません。

それでは各プロパティの詳細を見ていきます。

mix-blend-modeとは

mix-blend-modeとは色と画像や画像と画像を合成したいときに使うプロパティです。

例えば、以下２つの写真を合成したいとします。

その場合、以下のコードで合成することができます。

HTML:


<div class="background1">
  <img src="img/aurora.png">
  <img src="img/lion.jpeg">
</div>

CSS:


.background1 img:first-child {
  position: absolute;
  mix-blend-mode: soft-light;
}

結果として、以下のような画像が出来上がります。

このように、二つの画像を合成することができるので、mix-blend-mode です。
今回は、値を soft-light にしました。

mix-blend-mode が持てる値は合計16個あります。
中でもよく使うオススメのものはハイライトしてあるので、ぜひご覧ください。

color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
normal
overlay
saturation
screen
soft-light

また、 mix-blend-mode は画像と画像だけでなく、画像と色を合成することもできます。

例えば、以下の画像と色（今回は tomato ）を合成してみます。

HTML:


<div class="background2">
  <img src="img/aurora.png">
  <div class="bg"></div>
</div>

CSS:


.background2 img:first-child {
  position: absolute;
  mix-blend-mode: soft-light;
}
.bg{
  width: 100%;
  height: 800px;
  background-color: tomato;
}

結果として、以下のような画像が出来上がります。

仕様に関しては、W3Cの公式サイトをご覧ください。

background-blend-mode

次に、 background-blend-mode をご紹介します。
background-blend-modeとは色と背景画像や背景画像と背景画像を合成したいときに使うプロパティです。

先ほどと同じく、以下２つの写真を合成したいとします。

その場合、以下のコードで合成することができます。

HTML:


<div class="background3"></div>

CSS:


.background3 {
  background-blend-mode: soft-light;
  background-image: url('img/lion.jpeg'), url('img/aurora.png');
  background-size: cover;
  width: 100%;
  height: 800px;
}

このような指定をすると、background-blend-mode を使用することができます。
以上のコードで、出力されるものは以下のようになります。

このように背景画像を２つ合成することができました。
今回も値を soft-light にしているので、出力された画像は mix-blend-mode と全く同じです。

background-blend-mode の使える値は以下の通りです。

color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
normal
overlay
saturation
screen
soft-light

mix-blend-mode と同じく比較的よく使うものはハイライトしてあります。
よく値をみると、使える値が mix-blend-mode と同じだとわかります。

また、 background-blend-mode も mix-blend-mode と同じく、背景画像画像と色を合成することもできます。

例えば、以下の画像と色（今回は olive ）を合成してみます。

HTML:


<div class="background4"></div>

CSS:


.background4 {
  background-blend-mode: soft-light;
  background-image: url('img/aurora.png');
  background-color: olive;
  background-size: cover;
  width: 100%;
  height: 800px;
}

結果として、以下のような画像が出来上がります。

仕様に関しては、W3Cの公式サイトをご覧ください。

2つのblend-modeの使い分け

以上が2つのblend-modeのご紹介でした。
同じ順番で画像を重ね、同じ blend-mode に設定すると全く同じ結果をだす mix-blend-mode と background-blend-mode ですが、使い分けとしては、画像の場合は
mix-blend-mode , 背景画像を使いたい場合は background-blend-mode を使ってください。

どちらかというとメインビジュアルなどで使用することが多いので、 background-blend-mode として使う方が多くなるかと思いますが、まだブラウザサポートが現時点では IE, Edge, Opera ではされていないため、実用化されるのは、もう少しあとかもしれません。