問題タブ [mix-blend-mode]

どうやら mix-blend-mode はtransform: translate()and とうまく動作しませんz-index。これらのいずれかをテキスト要素に適用すると、ミックスブレンドモードの影響がすぐにキャンセルされます。

質問

1. これは既知の制限ですか?
2. CSS ベースの回避策はありますか?

JavaScript を使用して機能を模倣できることはわかっていますtransform: translate()が、これは実際には理想的ではありません。

css ブレンド モードを別の div の要素に適用することは可能ですか?

たとえば、1 つの div に大きな背景のヒーロー画像があります。その画像の上 (別の div 内) に、テキストが入った青い半透明のボックスがあります。この透明なボックスにブレンドを適用したいのですが、例https://css-tricks.com/basics-css-blend-のように、同じ div にないため、おそらく機能しないようです。モード/

私はワードプレスで作業しているので、画像と色付きのボックスを同じ div に配置するために HTML を再構築するのは少し難しいでしょう。

この方法を実現するために使用できるトリックを知っている人はいますか?

前もって感謝します！

だから私は mix-blend-mode: 乗算を使用します。ホバー時に画像の上に乗算レイヤーを作成する効果。問題は、下の図のようにレイヤーが画像の境界線からはみ出すことです。幅と高さを .imgcon および .imgcon > img (以下のコードを参照) に設定しようとしましたが、レイヤーは収まりましたが、異なる画面解像度で表示すると、レスポンシブ Web 機能が台無しになります。そのため、レスポンシブ機能を維持するために幅と高さを100％にしようとしましたが、レイヤーはまだ画像の境界線からはみ出しています。

私のコードは次のとおりです。

私のページには、背景画像のあるセクションと白い背景のセクションがあります。私のナビテキストの色は白です。ナビが画像の背景の上にある場合は、それを見ることができます。白地部分を超えると消えます。

画像の背景を持つセクション上の白いナビゲーション

私はmix-blend-modeCSSプロパティを知っています。私はほとんどすべての可能な値を試しました（/almanac/properties/m/mix-blend-mode/どうやら2つ以上のリンクを投稿できないため、CSS Tricksを参照してください...）。ホワイトオーバー ホワイト ナビゲーションでは良い結果が得られますが、ホワイト オーバー イメージでは悪い結果が得られますexclusion。difference

私が望むのは、ナビゲーションが白い背景でない限り、常に白いままであることです。

背景が白であることを検出したときにクラスをナビゲーションにバインドするJSアプローチを考えました。これは、すべての白い背景セクションに.lightクラスがあるため可能です。この解決策は問題なく動作しますが、ドキュメント要素でスクロール イベントが検出されるたびに実行されるため、少し重い (リソースを必要とする) ようです。

mix-blend-mode多くのリソースを必要としないため、このソリューションが気に入っていますが、私の使用法では機能しません。さらに、クロスブラウザーのサポートの問題があると思います. 私のソリューションは機能するので気に入っていますが、ページの速度が低下する可能性があります。誰かがより簡単な解決策を提案したり、ブレンドモードでうまくいくかどうか教えてもらえますか?

私の実用的なソリューションを備えたCodepen：http://codepen.io/anon/pen/bwXVKm

Google Chrome で非常に奇妙なバグに遭遇しました。

en 要素で mix-blend-mode プロパティを使用する場合、変換を適用すると: translateZ(50px); その下の要素に、それは機能しません!

これを見てください：

そのデモの 2 つのカードはまったく同じ構造、スタイル、および js 関数を持っていますが、後者は適切に機能しません。これは、mix-blend-property を持つ要素がその前にあるためです。それを削除しようとすると、正常に機能します!!

どうすればこの問題を解決できますか?!

同じブレンド モードを使用している場合でも、mix-blend-mode使用する場合と使用する場合では結果が異なることに気付きました。background-blend-mode

たとえば、以下の 2 つの結果を比較してください。

以下のセットアップと JSFiddles をコピーしました。

HTML

CSS

JSFiddle

mix-blend-mode の使用: https://jsfiddle.net/p8gkna87/

background-blend-mode の使用: https://jsfiddle.net/p8gkna87/1/

いくつかの背景情報

私は現在、ソフトライト ブレンディング モードを使用し、同時に 51% の不透明度を使用する Photoshop のデザインを複製しています。したがってbackground-blend-mode、不透明度を同じオブジェクトに適用できないため、使用できません。

これは可能であるように見えますが、解決策はあまりにも長い間私を避けてきました。mix-blend-mode を使用して、スクロール可能な div の穴から見える背景でリンクをクリック可能にできますか? の通常のトリックを試しましたpointer-events:noneが、「穴」が実際には透明ではなく、おそらく背景が実際には 2 レベル下にあるため、これは機能しません。

これまでの私のコードは次のとおりです。

コンテンツをスクロールすると、バックグラウンド コンテンツがリンクとともに表示されますが、リンクをクリック可能にする方法がわかりません (可能な場合)。

提案をありがとう。JS/Jquery ソリューションは問題ありませんが、ストレート CSS が最初の優先事項です。