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制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【Three.js】マウスにライトを追従させる方法

【Three.js】マウスにライトを追従させる方法

【PHP】json_encode()とjson_decode()でJSONを操る

【PHP】json_encode()とjson_decode()でJSONを操る

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

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

Amazonみたいな商品の拡大プレビュー機能を実装

Amazonみたいな商品の拡大プレビュー機能を実装

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

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

コピペで完了!CSSグラデーション(linear-gradient)まとめ

コピペで完了!CSSグラデーション(linear-gradient)まとめ