問題タブ [background-blend-mode]

mix-blend-mode物件をいじっていました。transform: perspective(100px)ページのどこかに何かまたは他の3D変換を追加するまで、すべてが正常に機能し、その後完全に壊れます。変換は適用されますが、ブレンド モードはなくなります。

Chrome と firefox、および Linux と Windows でテストしましたが、どこでも同じですが、別のコンピューターでは問題なく動作しました (どのバージョンの Chrome があり、ubuntu を実行していたかは覚えていません)。

それは CSS で修正できるものですか、それとも単にハードウェア / GPU ドライバーの問題でしょうか?

タグがまだ存在しないbackground-blend-modeのでタグを付けましたが、このプロパティは奇妙に完全に正常に機能し、変換によって壊れません。mix-blend-mode

ここに私が達成しようとしているコードペンがあります: http://codepen.io/vnenkpet/pen/avWvRg

稲妻の黒い背景が点滅するのではなく、ページの背景とスムーズに調和するようにします。

編集：

Firefoxで実際に動作することがわかりました。したがって、これはクロムのバグですか？私の知る限り、3D Transforms はブレンドモードを壊すべきではありません...

スポットライトのある繰り返し背景に取り組んでおり、これを実現するためにブレンド モードを使用することにしました。

ただし、Chrome ではブレンド モードが適用されていないように見えます。

ここに複製: http://jsfiddle.net/pptn4f5v/7/

これはChromeの制限ですか？これは Firefox で完璧に動作します。

content要素にフェードする効果を作成しようとしていheaderます。

ここにフィドルがあります：http://jsfiddle.net/jdesilvio/kthPT/105/

結果を見てスクロールすると、達成しようとしている効果がわかります。をよく見るHTMLと、要素とCSSが存在するはずですが、に設定されているため、それらは見えません。h4bordercolor: gray;

他の値を使用してみましたが、 Notingmix-blend-modeのさまざまな構成が機能しました。background: linear-gradient(gray 100px, transparent);

私の現在の実装は明らかに望ましくない副作用をもたらす可能性がありgray、色として使用できないことは言うまでもありません。この問題を回避するにはどうすればよいですか? もしそうなら、この効果を達成するための代替方法はありますか?

私は次のCSSコードを持っています:

グラデーションまたは URL 背景の位置は変更できます。それはブレンドの順序に何らかの影響を与えるはずだと思います。私の質問は、これらのモードをどのように適用して最終値を計算するのですか?

ブラウザは最初に適用blend-mode-1しurl('image-url')、linear-gradient(gradient)後でblend-mode-2最初の結果に適用しますか、url('image-url-2')それともその逆ですか?

正しい数の background-blend-mode を使用していますか、それとも 3 つ指定する必要がありますか?

Photoshop では、白い背景の JPG 画像を青色のドキュメントにインポートする場合、画像を「乗算」モードに設定することで画像backgroundの白を消すことができます。background

CSSだけでまったく同じことができますか？

背景画像、色、ブレンドモードのヘッダーがあります: 乗算。スクロールすると、背景の位置を垂直方向に変更して、視差効果を作成します。Firefox では正常に読み込まれますが、スクロールすると背景画像が正しく配置されません。50% 50% で開始し、ダウンスクロールで y 位置が増加するはずです。しかし、Firefox では、スクロールを開始すると約 20% にジャンプし (CSS には 50+% と表示されます)、そこから移動し続けます。インスペクタで背景の位置をいじって 0% に設定すると、次のようになります。

また、ご覧のとおり、 background-blend-mode:multiply もスクロールで動作しなくなります。どうしてこれなの？jqueryで背景の位置を変えるとFirefoxが嫌がる？

コード：

編集: background-blend-mode を使用しない他のページでも同じ視差効果があり、それらのページでは background-position が正常に動作します。スー.. ブレンドモードが背景位置のバグを引き起こしていると思いますか? よくわかりません。

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

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

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

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

前もって感謝します！

同じブレンド モードを使用している場合でも、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、不透明度を同じオブジェクトに適用できないため、使用できません。