14

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

.someclass
{
    /* grayscale */
    -webkit-filter: grayscale(1); 
    filter: gray; 
    filter: grayscale(1);
    filter: url(desaturate.svg#greyscale);

    /* multiply */
    background-color: rgba(190, 50, 50, 0.65);
    background-blend-mode: multiply;
}

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

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

ここに画像の説明を入力

4

3 に答える 3

11

フィルターではできませんが、すべてのブレンドモードのままで実行できます

ブレンドに相当するグレースケールは光度であり、画像をソースとし、白一色を背景として使用します。

したがって、背景画像は下から上に次のようになります。

  1. 白（背景色として）
  2. あなたのイメージ
  3. 赤一色 (現時点ではグラデーションとして指定する必要があります)

ブレンドモードは明度と乗算です

.test {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(0deg, red, red), url("http://cuteoverload.files.wordpress.com/kitteh_puddle-1312.jpg");
  background-color: white;
  background-blend-mode: multiply, luminosity;
  background-size: cover;
}
<div class="test"></div>

于 2015-03-02T19:40:10.030 に答える
2

ブレンド モードは背景レイヤーに適用され、次にフィルターが要素全体に適用されるため、これらは 2 つの異なる処理を行っています: 背景が計算されるまで (赤っぽい外観を含む)、要素全体がフィルターでグレースケールに変換されます。

画像参照用の filter() 関数が提案されているため、理論的には、読み込まれた画像にフィルターを適用できるはずです。これがアイデアだと思います：

.someclass {
    background-image: filter(cat.jpg, grayscale(100%));
    background-color: red;
    background-blend-mode: multiply;
}

残念ながら、これはまだどこにも実装されていないと思います。フィルター仕様のドラフト バージョンにあるだけです。

一般に、これらのタイプの「後処理」CSS 効果に関する操作の順序は、SVG の場合と同じ順序で定義されます。つまり、最初にフィルタリングが行われ、次にクリッピングが行われ、次にマスキングが行われ、次にブレンドが行われます。

( Blending & Compositing Spec.を参照してください。 ) したがって、それを変更することに関して、あなたにできることは何もありません。

于 2014-10-01T12:47:40.600 に答える