問題タブ [mix-blend-mode]

強力なプロパティのように思われる CSS の mix-blend-mode を調べています。ただし、これが実際にどのように機能するかについては非常に混乱しています。予想外の結果になってしまいました。例として、このコードペンを取り上げます。

https://codepen.io/KingKabir/pen/ONyPeg

本体の背景は暗い色に設定されていますが、他のすべてのセクションの背景は白に設定されています。

ここで、ボディの背景色を白に変更してみてください。メニューの色が黒に変わらないことに注意してください。ここで何が起こっているのですか？両方のセクションの背景色が同じですか?

最初のセクションの背景色を特に白に設定すると、意図したとおりに機能します。ただし、最初のセクションに背景色がなく、本文が白に設定されている場合はそうではありません。結果は同じではないでしょうか？

私が取り組んでいるプロジェクトでこの正確な問題が発生しており、何が起こっているのかわかりません。編集：Google Chrome 83.0.4103.106を使用しています

編集：ここに私が意味するイメージがあります

この種の形状を作成しようとしている人々についての投稿をたくさん読みましたが、私が持っている最善の解決策は を使用することmix-blend-mode:screen;です. これらの投稿は 5 年以上前のものなので、新しい種類の解決策があることを願っています。

ただし、テキストが の影響を受けないようにする必要もありますmix-blend-mode。isolation:isolate;私はラッパーを試しました<div>が、円が消えたか、白いコンテナをノックアウトせず、それとブレンドしただけなので、それは役に立ちませんでした（はい、それが本来の目的であり、必要なことではないことに気づきました） ）。また、テキストを別の場所に配置して、デスクトップで機能している間<div>に使用しようとしposition:absolute;ましたが、応答がなく、本当にハッキリしているようです。

つまり、コンテンツのテキストの色に影響を与えずに、以下にあるものを作成する必要があります。

どんな助けでも大歓迎です。

DOM の下位にある別の要素に独自のプロパティが追加されている場合、h1要素はそのプロパティを失い、デフォルトで白の色に戻ります。mix-blend-modemix-blend-mode

コンテナー内のさまざまな要素が、それら自体にプロパティが与えられているときに、コンテナー内ではなく要素のプロパティをdiv壊しているように見えるため、この問題の原因を特定するのに非常に苦労しています。mix-blend-mode<h1>mix-blend-mode

この問題は、Chrome と Firefox でテストした場合にのみ Chrome で発生します。この問題は、何らかの理由で codepen や同様のものではなく、自分の Web サイトでのみ生成できます。

ここに私が取り組んでいるウェブサイトのドラフトがあります(Chrome で開きます!)

サンプル ビデオ要素 (ビデオを再生します。開始するまで 1 秒待つだけです) に (継続的に) カーソルを合わせると、h1そのプロパティが失わmix-blend-modeれ、白に変わります。これは私が望んでいないことです。サンプルビデオにカーソルを合わせたときに「ビデオ」テキストがプロパティを取得するようにしmix-blend-modeたいのですが、これはすでに正しく行われており、何らかの問題を引き起こしていると思います。

(多くの HTML 要素を取り除かなければならなかったため、css ファイルには何にも添付されていない余分な css がたくさんあります。)