Home
CSS
mix-blend-modeが効かない時はスタックコンテキストを考えよう

mix-blend-modeが効かない時はスタックコンテキストを考えよう

公開日
2021.11.27
更新日
2021.12.04
mix-blend-modeが効かない時はスタックコンテキストを考えよう

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

Adobe Photoshopなどのブレンドモード(乗算・スクリーン・オーバーレイなど)を表現できるmix-blend-modeというCSSのプロパティがあります。

グラフィックツールの機能をWebでも表現できてとても便利なプロパティですが、要素がブレンドされる仕組みを知っておかないとmix-blend-modeが効かない時に問題を解決できないかもしれません。

今回はmix-blend-modeが効かない時にまず疑った方が良いであろうスタックコンテキストについて解説していきます。

この記事では、

  • ・スタックコンテキストとは?
  • ・mix-blend-modeの仕様
  • ・mix-blend-modeが効かない時の解決方法

がわかります。

スタックコンテキストについて

スタックコンテキストとは?

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

mix-blend-modeの仕様

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

同じスタックコンテキストに属するってどうゆうこと?

言葉だけだと理解しにくいと思います。
図を含めて解説しましょう。

まず、うまくいっている例から
以下のデモでは.wrapper要素 > .inner要素 > .box要素の順で親子の関係になっています。

.wrapper要素の背景画像を設定して、.box要素とブレンドさせたい時は.box要素にmix-blend-modeを指定すればうまくいきます。
なぜなら同じスタックコンテキストに属しているからです。

同じスタックコンテキストに属している

一方でうまくいかない例がこちら
以下のデモは先程のデモと同様の構造で.inner要素にtransform: skew(10deg);を指定しています。

この場合は、.box要素にmix-blend-modeを指定してもうまくいきません。
なぜなら、.inner要素がスタックコンテキストを形成して.wrapper要素と.box要素は同じスタックコンテキストに属していないからです。

transformnone以外を指定するとスタックコンテキストが形成されます。
他にもスタックコンテキストを形成するCSSプロパティがあります。

.inner要素がスタックコンテキストを形成している

mix-blend-modeが効かない時の解決方法

transform: translate(-50%,-50%);を使いたい

positionで要素を中央に配置したい時にtransform: translate(-50%,-50%);を活用するかたは多いと思います。
しかし、そのせいでmix-blend-modeがうまくいかない場合は他の方法で中央に配置するようにしましょう。
実はpositionmargin: auto;でも要素を中央に配置することができるので試してみてください。

positionmargin: auto;を使って要素を中央に配置する方法は以下の記事で解説しています。

おわり

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

関連記事

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

【PHP】配列の要素の数を取得する

【PHP】配列の要素の数を取得する

jQueryでheaderとfooterを共通化する【load()メソッド】

jQueryでheaderとfooterを共通化する【load()メソッド】

Visual Studio Codeの検索と置換

Visual Studio Codeの検索と置換

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

gsapのstaggerで順番にアニメーションさせる方法

gsapのstaggerで順番にアニメーションさせる方法