問題タブ [mix-blend-mode]

テキスト要素で「mix-blend-mode:overlay」を使用するだけで、テキストが画面ビューにある間、ブラウザのスクロールが非常に遅くなります。テキスト項目をスクロールするとすぐに、スクロールはスムーズに戻ります。

mix-blend-modeを削除すると、chromeとfirefoxの両方に影響するラグ効果が解決されます。

他の誰かが mix-blend-mode で同様の問題を抱えていますか?

両方のレイヤーが白である2つのテキストレイヤーを互いにブレンドしようとしていますが、2つの単語が重なっている部分では、単語を背景と同じ色にしたいと考えています。

mix-blend-modeをいじり始めました。

ブラウザの最新バージョンでのみ動作する必要があります（気にしないでください）

http://codepen.io/SusanneLundblad/pen/bEopPw?editors=110

誰か提案があれば、私はとても幸せです！

で遊んでいると、変なものを見つけましたmix-blend-mode。背景画像を修正すると、mix-blend-mode効果が機能しません。これは Chrome で発生しています。しかし、Firefox では問題なく動作します。私は視差をよく使うので、これは残念です。背景を修正して引き続き使用できるように、なぜこれが起こっているのか、それを回避する方法はありますmix-blend-modeか?

psfixedここからを削除 -->background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center fixed;すると、正常に動作することがわかります。ただし、背景はスクロールとともに移動します:(

次に例を示します。

CSS:

これは私が見ているものです：

このCODEPENを使用できます

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

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

このプロパティは、たとえば、明るい背景に設定されていてテキストが読めない場合、明るい背景に暗いテキストの色を作成すると思います...または、画像上にある場合、および/またはその逆の場合はテキストの色を反転します。

SOに関するいくつかの質問を見てきましたが、実際にはそれらを見つけることができず、プロパティ名を覚えていません。不明な場合：

テキストの色が白に設定されている場合、python ロゴの周囲に空白があり、テキストが画像の上にあるため、読み取ることができませんでした。現在のようにテキストを黒に設定する css プロパティがあります。それの名前は何？

CMS を使用して、ページの上部に「ヒーロー エリア」を構築しています。背景画像、いくつかのテキスト、およびいくつかのボタン リンクがあります。mix-blend-mode:multiplyボタンを背景画像に合わせたい。

私の問題は、デフォルトの CMS CSS がボタンを背景画像とは異なるスタック コンテキストに配置するため、ボタンがブレンドされないことです。具体的には、.innerクラスにposition:relativeとがあることが問題ですz-index:1。CSS を上書きして同じコンテキストposition: staticに配置すると、セクション全体のレイアウトが崩れます。

を取り除かずbuttonに をブレンドするための回避策はありますか?.outerposition:relative.inner

5 つの shape で構成された単純な svg があります。この svg とレイヤー カラーを「ミックス ブレンド モード」したいと考えています。ただし、この css プロパティは Internet Explorer では機能しません。SVG の各形状の結果を計算する方法はありますか?

透け感はありません。

「.box-with-text」の「背景色」を削除すると、テキストの塗りつぶしが機能しないという問題がありました。

コデペン

私はいろいろと試してみましたが、ほとんどのプロパティは機能しますが、最新のすべてのブラウザーでmix-blend-mode期待される機能とは多くの矛盾があります。mix-blend-mode: screen

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Firefox (47.0) の場合

IE エッジ (25.10586.0.0)

そして、Chrome (51.0.2704.106 64 ビット) と Safari (9.0) の両方

MDN であるため、期待される出力は Firefox が生成するものだと思います。IE Edge は mix-blend-mode をサポートしていないため何も起こらないため、理にかなっています。

Webkitの問題であると思われますか？私はそれについて何も見つけることができませんでしたが。から実験的な Web 機能も有効にしました。chrome://flags

しかし、それは問題を解決しませんでした。Safari/Chrome でこれを修正する方法はありますか? mix-blend-mode他のプロパティでも機能します。つまり、出力されるはずdifferenceのものに問題がありました。screen