2017年7月25日

デザイン

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

目次

  1. はじめに
  2. CSS blend modes
  3. 対応ブラウザ
  4. mix-blend-modeとは
  5. background-blend-modeとは
  6. 2つのblend-modeの使い分け
  7. まとめ

はじめに

本記事では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の2つのブラウザではサポートされていますが、IE,Edgeでは未対応です。

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

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

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

mix-blend-modeとは

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

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

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

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とは色と背景画像や背景画像と背景画像を合成したいときに使うプロパティです。

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

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

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 を使用することができます。
以上のコードで、出力されるものは以下のようになります。

このように背景画像を2つ合成することができました。
今回も値を 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-modemix-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-modebackground-blend-mode ですが、使い分けとしては、画像の場合は
mix-blend-mode , 背景画像を使いたい場合は background-blend-mode を使ってください。

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

まとめ

以上が、mix-blend-modebackground-blend-mode についてです。
今回は画像と画像、画像と色を組み合わせる例をご紹介しましたが、グラデーションと組み合わせるとさらにメインビジュアルとして使える幅が広がります。

ブラウザサポートも2017年7月時点で全世界の86.35%とだんだんサポートされてきているので、ぜひ気になる方少し触ってみてはいかがでしょうか?

2

1

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP