mix-blend-mode

0熱

1答えて

CSSプロパティmix-blend-modeを使用せずにブレンドモードエフェクトを取得する方法：乗算

このコード出力のようになりますが、サポートを得るためにCSSのmix-blend-mode: multiplyプロパティを使用しないでくださいいくつかの古いバージョンのモダンブラウザです。 CSSのこの機能はまだ低いサポートされ、このリンクを見てcaniuse.com[mix-blend-mode] .active{ font-size: 80px; font-fami

5熱

1答えて

Chrome/Safariで最近mix-blend-modeが処理される方法が変更されました

Chromeの最新バージョン（おそらくv56またはv57ですが、わかりません）を使用して2〜3週間前にウェブページを作成しました。開発中のSafariとFirefox（OSX上） http://dirkluetter.de/projecttype/kamera Firefox（v52 & v53）は意図したとおりにページを表示します。最新のChromeバージョン（v58）はもうありませんが、私

0熱

1答えて

CSS：特定の要素にのみmix-blend-modeプロパティを適用する

mix-blend-modeプロパティを使用して、特定のSVGパスをストロークの背景イメージにして、パスがあたかも消去パス。次のコードは私が到達したものです。しかし、わかるように、ミックスブレンドプロパティは、ストロークの背景イメージなしで表示する必要がある他のパスに影響します。したがって、mix-blend-modeプロパティを要素のグループだけに適用し、他の要素は影響を受けないようにする方法を

0熱

1答えて

不透明度とトランジションのアニメーションブレンドモード

background-color-blend-modeの不透明度を Photoshopのように変更する方法を探しています。私の目標は、ブレンドモードの不透明度をアニメーション化して消滅させることです。何か案は？ #img-esadvalence { background-image: url(http://leodurand.fr/works/planesad/esad1.jpg)

0熱

1答えて

Chromeのmix-blend-modeプロパティによるアニメーションの遅れ

Chromeを起動してフルスクリーンモードで自分のフィドルを確認すると、アニメーションが遅くなることがわかります。ディビジョンは少し下がっていきますが、テキストは少し浮き上がっています。ブラウザのサイズを小さくすると、アニメーションがうまく再生されます。また、私のアニメーションはSafariで正常に動作します。 mix-blend-modeプロパティを含む.light-leaksクラスを削除すると

0熱

1答えて

赤色の緑色と青色のdivを組み合わせるときに、スクリーンミックスブレンドモードを使用して白を取得する

mix-blend-modeのscreenの値を使用して、赤と緑のそれぞれの1つの3つのdivを結合しています。私は組み合わされた部門の中心に白があるはずだと思うが、色ははっきり見える。これがどういうふうに誤解しているのですか、それとも間違って使っていますか？ありがとうございました。あなたは右のそれをやっている body { background-color: black; }

0熱

2答えて

mix-blend-modeが動作しない場合があります

私は、スクロール可能なブロックの下部に緩やかなテキストフェーディング効果を達成しようとしています。また、このブロックの後ろに画像がなければならないので、このブロック上に色（不透明度）勾配を配置するだけではできず、mix-blend-modeを使用する必要があります。 <div id="stage"><img ...></div> <div class="layer"> <h2>...<

0熱

1答えて

ミックスブレンドモードの違い

私はミックスブレンドモードを追加しようとしました。「スパン」するが動作しない。このソリューションは機能します： ".caption"に ".caption span"の代わりにブレンドモードを追加します。しかし、私が本当に必要とするのは、divにspanを入れることです。なぜでしょうか？ありがとうございました！私の知る限りで .caption { position: absol

5熱

1答えて

mix-blend-modeを適用した後の太いテキスト：difference

私がしたいことは、バックグラウンドの色に応じて色を変えるインターフェイスを作成して、テキストを常に読み取り可能にすることです。これまでのところすべて正常に動作します。私実施例を示すために私のブラウザを記録しました：私の研究からを、私はこれを達成するための最善の方法は、mix-blend-mode: difference;を使用していたことを発見しました。唯一の問題は、いくつかの未知の理由からテキ