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%とだんだんサポートされてきているので、ぜひ気になる方少し触ってみてはいかがでしょうか?

CSSのお仕事に関するご相談

Bageleeの運営会社、palanではCSSに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

4

2

AUTHOR

sasakki デザイナー

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

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

yamakawa

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

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

kobori

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

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

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

sugimoto

sugimoto

CONTACT PAGE TOP