問題タブ [background-blend-mode]

画像を Photoshop ファイルと同じように処理しようとしています。画像の彩度を下げてグレースケールにしてから、乗算ブレンド モードでカラー オーバーレイを適用します。この目的のために、私はCSSの背景画像をスタイリングしています...

これに伴う問題は、グレースケール フィルターが最終的にブレンド モードの赤の彩度を下げることです。つまり、乗算が最初に発生し、次にグレースケールが発生します。グレースケールが最初に適用され、次にブレンドモードが適用されるように切り替えるにはどうすればよいですか?

コード用のフィドル ( http://jsfiddle.net/g54LcoL1/1/ ) と、フィドルの結果がどのように見えるかを示すスクリーンショット (Photoshop で作成) を作成しました。一番下の画像 はdiv.grayscale.multiply、赤く着色する必要があります。

グラデーションが背景プロパティとして適用されたdivがあるとします。私は今、（小さいサイズの）黒のPNGをオーバーレイし、PNGをオーバーレイの背景ブレンドモードに設定したいと考えています。残念ながら、これを達成する方法がわかりません。

次のような PNG 画像を使用してグラデーションを Div の CSS にレンダリングすると、background-blend-modeが機能することがわかっています。

ただし、これにより、次のように、グラデーションが実際の PNG と同じくらい小さくなり、これは望ましい効果ではありません。

私が達成したいのは、純粋なCSSでこれです（可能であれば）：

ここに、私がやろうとしていることを説明するコードペンがあります: http://codepen.io/anon/pen/zxOXGP 黒いアイコンに注目してください。これを重ねたい。

2 つの div があります。1 つは全画面の背景画像、もう 1 つはマークアップ付きのバーです。

home.barクラスにブレンド効果を持たせようscreenとしていますが、これを次のようにしようとしています

しかし、私は望ましい効果を得ることができません。.home の上に .home-bar を表示するにはどうすればよいですか?

background-blend-mode: multiply;ブートストラップのカルーセル コンポーネントを使用しており、キャプションに CSS ブレンド モードも使用したいと考えています。

残念ながら、ブレンドモードは機能しません。

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

CSS は次のとおりです。

これは間違った方法ですか？

マウスをホバーするとモノクロの画像を作成しようとしています。画像の色はグレースケールに変換され、その後、グレーの色合いがブレンドしている色の色合いに置き換えられます。

このように見えるかもしれません

Photoshop でこれをシミュレートするには、画像をグレースケール化し、目的のカラー レイヤーを上に追加して、スクリーン モードでブレンドします。

私が理解している限り、cssフィルターとbackground-blend-modeを組み合わせるとcssにこの可能性がありますが、フィルターを使用すると結果は常にグレースケールになります。

だから私は、このブレンドを取得する他の方法があるかどうか、または css フィルターを使用せずに画像をグレースケールする方法があるかどうかを尋ねています

CSS background-blend-mode をどこでも適切に劣化させる方法で使用すると、イライラする問題が発生します。具体的には、iOS 上の Safari と Chrome は、サポートをテストする私の努力を回避しているようです。

この記事の執筆時点では、background-blend-mode (少なくとも基本的な形式) は、IE を除くほとんどのブラウザーの最新バージョンでサポートされています ( http://caniuse.com/#feat=css-backgroundblendmodeを参照)。次のように、単色の背景色とグレースケール テクスチャをブレンドするために使用しています。

background-blend-mode は劣化するように設計されているため、ブラウザーでサポートされていない場合、そのブラウザーには通常の背景画像が表示されます。ただし、次のように、サポートされていないブラウザーを明確にターゲットにして、無地の色のみが表示されるようにしたいと思います。

CSS Tricksなどは、このプロパティをサポートするための JavaScript ベースのテストを提案しており、私は次のように使用しています。

これは、適切な .no-background-blend-mode クラスを取得する IE をターゲットにする場合にうまく機能します。デスクトップ上の Chrome、Firefox、および Safari はすべて、問題なくブレンドモードをサポートしています。

問題は次のとおりです。iOS 8.3 で Safari と Chrome の両方を調べていますが、どちらもテストに合格( typeof supportsBackgroundBlendMode「通常」を返します) していますが、ブレンド モードの実装に失敗しています。(両方とも、ブレンドではなく、グレースケールの背景画像のみを示しています)。

ここで何が起こっているのかを理解するのを手伝ってくれる人、および/または実際に機能するこの機能のためにこれらのブラウザをテストしてターゲットにする方法を見つけるのを手伝ってくれる人はいますか? ありがとうございました！

更新: iOS 8.4.1 (この編集時点で最新のもの) にまで続くこの問題の適切な解決策はまだ見つかっていません。

CSS を使用して、背景画像を色とブレンドしようとしています。ただし、画像は半透明の部分を持つ PNG です。実際に表示されている部分にのみブレンドモードを適用するにはどうすればよいですか? PNG に穴がある場合、背後にある要素が遮られずに見えるようになりますか?

次のようなコード:

上部の画像と混じり合う不透明な色になります。画像の完全に半透明のピクセルには、結果が半透明になる代わりに背景色が含まれます。

これを解決する方法を知っている人はいますか？前もって感謝します ：）

CSS と html から ven ダイアグラムを作成しています。Firefox では、何らかの理由で mix-blend-mode が完全に黒く表示されますか?

何らかの理由で、これは FireFox で 2 つの黒い円として表示されますか?