Home
CSS
【CSS】mix-blend-modeで乗算などを表現する方法

【CSS】mix-blend-modeで乗算などを表現する方法

公開日
2021.11.20
更新日
2022.04.02
【CSS】mix-blend-modeで乗算などを表現する方法

どうも!かけちまるです!

Adobe IllustratorやAdobe Photoshopでは重なったレイヤーの見え方を指定できるブレンドモード(乗算・スクリーン・オーバーレイなど)があります。

でも、少し前まではCSSでブレンドモードを表現するのは難しかったみたいです。
しかし、mix-blend-modeプロパティでは表現が難しかったブレンドモードがCSSで表現できるようになります。

デザインカンプでブレンドモードが使われていてもなんなく表現できるので使いこなせるようになることをオススメです。

この記事では、

  • ・ブレンドモードとは?
  • ・mix-blend-modeのブラウザサポート状況
  • ・mix-blend-modeの使い方
  • ・mix-blend-modeがうまくいかない時

がわかります。

ブレンドモードとは?

Adobe IllustratorやAdobe Photoshopなどのソフトでよく使われる表現方法です。
2つのレイヤーが重なった時にどのように合成され表示されるか設定する方法です。
種類としては、乗算・スクリーン・オーバーレイ・差の絶対値などがあります。
使用するソフトによって呼び方は異なるようですが、この記事では「ブレンドモード」と呼びます。

ブレンドモードがどんなものか言葉では分かりづらいと思うので画像を載せておきます。

ブレンドモードの例

ブラウザサポート状況は?

2021年11月20日現在では、新しいバージョンのブラウザであればIE以外はサポートされています。
安心して使えそうですね。

ブラウザサポート状況

最新のサポート状況は「Can I use」からチェックできます。

mix-blend-modeの使い方

mix-blend-modeは重なった要素の表示方法を決めるプロパティなのでpositionを使って要素を重ねる必要があります。
その上で、z-index的に上にある要素にmix-blend-modeを指定することで適応されます。

以下の実装サンプルでは画像の上にテキストを重ねています。
その上で、テキストにmix-blend-modeを指定することで適応されます。
実装サンプルではオーバーレイを指定しています。

実装サンプル

mix-blend-mode
balloon
HTML
コピー
<div class="demo_wrap"> <img class="demo_bg_img" src="./image/mix-blend-mode.jpg"> <div class="demo_text">balloon</div> </div>
CSS
コピー
.demo_wrap{ position: relative; } .demo_bg_img{ display: block; width: 100%; } .demo_text{ color: #000; font-size: 64px; font-weight: bold; mix-blend-mode: overlay; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

mix-blend-modeが適応されない時は?

スタックコンテキストは発生しているかも

スタックコンテキストとは、Webページ上で特定の条件を満たした要素によってZ軸に形成される階層構造のことです。

mix-blend-modeでは、要素が同じスタックコンテキストに属している必要があります。

例えば、
transformauto以外を適用した要素にはスタックコンテキストが発生してしまいます。
positionで要素を中央に配置するときにtransform: translate(-50%,-50%);を使いたいと思います。しかし、transformを使わずに要素を中央に配置する方法は以下の記事で解説していますので解決に役立てればと思います。

背景色を指定しているか

mix-blend-modeでは重なった要素の合成方法を決めるのでブラウザの元々の背景色には適応されません。
背景色が白でも要素にはbackground-color: #fff;を指定すると問題が解決するかもしれません。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

JSでユーザが使っているブラウザを判定する方法【userAgent】

JSでユーザが使っているブラウザを判定する方法【userAgent】

【Three.js基礎】概念の理解と立方体の実装

【Three.js基礎】概念の理解と立方体の実装

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

Underscore.jsについて学ぶ

Underscore.jsについて学ぶ

jQueryでスクロール中か否かを判定する方法

jQueryでスクロール中か否かを判定する方法

次世代画像フォーマットWebPでサイトの表示速度を改善しよう!

次世代画像フォーマットWebPでサイトの表示速度を改善しよう!