問題タブ [mix-blend-mode]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 異なる z-index を持つネストされたコンポーネントで mix-blend-mode を使用する
ネストされた絶対位置の div を使用するセットアップがmix-blend-modeあり、div の要素を、その div よりも低い z-index を持つすべての要素とブレンドする必要があります。
問題は、各 div が独自の独立した z-index を持つ必要があることです(これはアクセシビリティ上の理由から変更できません)。
これは例で説明するのが簡単です:
layer-3とブレンドするには の中にある画像が必要layer-1です。フィドルから z-index を削除するlayer-2と、ブレンディングが適切に機能することがわかります。ただし、前述のように、アクセシビリティ上の理由から、これはオプションではありません。
ここで jsfiddle を作成しました: https://jsfiddle.net/gabranches/v6cuL2o4/44/
これを回避する方法はありますか、それとも単なる制限mix-blend-modeですか?