mix-blend-modeが効かなくてハマったのでメモメモ。
固定された「上へ戻るボタン」に [ mix-blend-mode : multiply ; ]をかけ、暗い背景でも白抜き文字が読めるようにしたかった。デザイナーから支給されたXD上では、ボタンを丸ごと「描画モード:通過」指定すると、暗い背景でも白抜き文字が読める状態。
で、CSSでのコーディングでボタンに丸ごと [ mix-blend-mode : multiply ; ]をかけると、当然ではあるが暗い背景では白抜き文字も影響を受けて暗くなるので読みにくい。
じゃぁというので、position:fixで位置固定した<p>の中に、 [ mix-blend-mode : multiply ; ]した<span>を置き、その上に文字を入れた<a>を重ねて置いてみたところ、なぜだかブレンドモードにならない。ミスタイプでもしたか?重ね順をへぐったか?とあれこれ原因探して時間を使ってしまった。
結論を書くと、mix-blend-mode には「スタックコンテキスト」という概念が必要らしい。要するに重ね順を指定したグループごとにうんぬんという話で、同じスタックコンテキストに属していないとブレンドモードが発動しないとのこと。
今回は、位置固定した<p>の後ろに同じ形の<p>を置いて、そちらに [ mix-blend-mode : multiply ; ]することで解決。