構成とブレンド (2)_html/css_WEB-ITnose

前回の記事では、ソースイン、XOR などのいくつかの合成方法について説明しました。しかし、これらはすべてクロップに関連しています。次にブレンドを紹介します。

ブレンドとは

私の理解では、ブレンドは合成のステップであると考えています。前回の記事でいくつかの合成方法について説明しましたが、ブレンドとは 2 つの画像の色を混ぜることです。

最も典型的な例は、赤、青、緑の 3 つのボールが、これら 3 つの層をブレンドした結果であると想像できます。

Photoshop のブレンド モードは、Photoshop を使用したことのある人なら誰でもこの機能に精通しているはずです。

CSS のブレンド

CSS のブレンドの標準は、もともと Adob​​e によって提案されたドラフトでした。

CSS には、混合方法を制御する、isolation、mix-blend-mode、background-blend-mode の 3 つのプロパティがあります。

• mix-blend-mode は、要素がその「下」の要素とどのように混合されるかを指定します

• background-blend-mode は、background-image が背景色とどのように混合されるかを指定します

• 分離要素を指定します ブレンドには関与しません

以下の Web サイトでは、CSS Blend を使用して多くの複雑なグラフィックを実装していますが、背景の 1 つの CSS コードはわずか 12 行であり、画像を読み込むよりもはるかに小さいです。

http://bennettfeely.com/gradients/

各種モードのブレンド計算方法

ブレンド属性には、暗くする、オーバーレイ、覆い焼きなど多くの値があります。最も一般的に使用されるのは乗算です。多くのデザイナーは「乗算」という用語を知っているはずですが、それが何をするのかを理解している人は多くありません。

ここで、さまざまな混合モードの計算方法について説明します。

Cs = ソースカラー = 前景色

Cb = 背景カラー = 背景色

B(Cb, Cs) = ブレンドモード

Cs と Cb は 1*3 行列 [R, G, B]マトリックスの各要素の値の範囲は 0 ~ 1 です。

normal

B(Cb, Cs) = Cs

Normal メソッドは、実際には Compose でのソース オーバー動作と同じであり、一般的な画像オーバーレイ メソッドでもあります。

multiply

B(Cb, Cs) = Cb x Cs

この式から、混合結果が前景と背景よりも暗いことがわかります。そして、前景と背景の白が削除されます。

screen

B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]          = Cb + Cs -(Cb x Cs)

screen は乗算の正反対のように感じられ、生成された結果は背景や前景よりも明るくなります。

ハードライト

if(Cs <= 0.5)    B(Cb, Cs) = Multiply(Cb, 2 x Cs)else    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)  

overlay

B(Cb, Cs) = HardLight(Cs, Cb)

ハードライトで背景と前景を反転するのがオーバーレイです

darken

B(Cb, Cs) = min(Cb, Cs)

背景と前景で最も暗いピクセルを選択します地面

軽くする

B(Cb, Cs) = max(Cb, Cs)

背景と前景で最も明るいピクセルを選択します

カラー覆い焼き

if(Cb == 0)    B(Cb, Cs) = 0else if(Cs == 1)    B(Cb, Cs) = 1else    B(Cb, Cs) = min(1, Cb / (1 - Cs))

カラー焼き付け

if(Cb == 1)    B(Cb, Cs) = 1else if(Cs == 0)    B(Cb, Cs) = 0else    B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

ハードライト

if(Cs <= 0.5)    B(Cb, Cs) = Multiply(Cb, 2 x Cs)else    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)  

ソフトライト

りー

違い

りー

除外

    if(Cs <= 0.5)        B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)    else        B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)with    if(Cb <= 0.25)        D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb    else        D(Cb) = sqrt(Cb)

参考資料

合成とブレンド レベル 1