強力なプロパティのように思われる CSS の mix-blend-mode を調べています。ただし、これが実際にどのように機能するかについては非常に混乱しています。予想外の結果になってしまいました。例として、このコードペンを取り上げます。
https://codepen.io/KingKabir/pen/ONyPeg
本体の背景は暗い色に設定されていますが、他のすべてのセクションの背景は白に設定されています。
body { background-color: #000 }
section:nth-of-type(even) { background-color: #FFF}
ここで、ボディの背景色を白に変更してみてください。メニューの色が黒に変わらないことに注意してください。ここで何が起こっているのですか？両方のセクションの背景色が同じですか?
最初のセクションの背景色を特に白に設定すると、意図したとおりに機能します。ただし、最初のセクションに背景色がなく、本文が白に設定されている場合はそうではありません。結果は同じではないでしょうか？
私が取り組んでいるプロジェクトでこの正確な問題が発生しており、何が起こっているのかわかりません。編集：Google Chrome 83.0.4103.106を使用しています
編集：ここに私が意味するイメージがあります
