Web ページ上のより豊富なマルチレイヤー効果: CSS ブレンディング mode_html/css_WEB-ITnose

レイヤー

Photoshop などの画像編集ソフトウェアでは、レイヤーは最も基本的な概念の 1 つです。私たちは普段写真を見るときに「遠くの背景」「近くの人物」といった表現を思い浮かべるかもしれませんが、これが実はレイヤーを分けているのです。複数のレイヤーを下から上（遠くから近く）に順番に組み合わせて、完全な画像を取得します。

重ね着は便利です。一方で、レイヤーは独立しており、変更されても互いに影響しません。他方では、レイヤーは元のイメージを保持して、簡単に復元またはその他の調整を行うことができます。

Web ページのレイヤー

Web ページにはレイヤーという明確な概念はありませんが、レイヤーとして理解するのが非常に適しています。 Web ページ内の各要素は、独自のレイヤーを持つものとして表示できます。 CSS の z-index も、レイヤーの順序を調整するツールによく似ています。

正確に言うと、Web ページ内の要素のカバレッジ関係を決定するのは 描画順序 です。後の描画順序の要素は、前の描画順序の要素をカバーします。

描画順序と密接に関連する概念は、スタッキング コンテキスト (スタッキング コンテキスト) です。スタッキング コンテキスト内では、ブラウザは常にコンテキスト内のすべての要素を特定の順序で描画します。

オーバーラップと合成

Web ページ内の要素がオーバーラップするため、Z インデックスを非常に慎重に調整することがあります。

このようにオーバーラップすると、一方の要素がもう一方の要素の一部をブロックします。カバレッジ関係を変更したい場合があります:

ここでは、要素の重複部分だけが異なります。重なり部分が要素の 1 つと一致すると、その要素が他の要素の上にあるように見えます。

実際には、Web ページの重複部分はこの小さな部分よりもはるかに多くなります。上の例の 2 つの要素は、互いに重なり合っているだけでなく、この記事の背景要素とも重なり合っています。

要素に背景を設定すると、ページ上に表示されるすべての要素の最終的な表示効果がこの背景に関連付けられると言えます。

これほど多くの重複関係がある Web ページでは、最終的な効果がどのように決定されるのでしょうか?これは、合成 (合成) と呼ばれる構造化プロセスでもあります。

簡易アルファ合成

簡易アルファ合成 (簡易アルファ合成) は、私たちにとって理解しやすい合成方法です。この記事で次に紹介するブレンド モードが登場するまでは、これが Web ページで使用される唯一の合成方法でした。現在のすべてのブラウザで利用できます。

理解しやすい理由は、私たちの普段の視覚体験と一致しているからです。たとえば、前の例では、要素の 1 つの透明度を変更します。

要素が半透明の場合、その背後にある要素の一部がブロックされていても、その部分は透明のままです。見える。透明度が高くなるほど (不透明度が 0 に近づくほど)、重なり合う領域が遮蔽された要素の方向に向けられます。完全に透明（不透明度が 0）の場合、どの要素も隠されていないように見えます。

新しい合成: ブレンド モード

ブレンド モード は、Photoshop などの画像編集ソフトウェア内のレイヤー パネルの重要な機能であり、現在は w3c の推奨事項にも含まれています。仕様。

Web ページで利用できる描画モードは次のとおりです:

上の画像は Photoshop の描画モードに対してマークされており、紫と赤の部分がWeb ページで利用できるブレンディング モードの右端は、混合モードのグループ分類です。デフォルトの「ノーマル」は、実は先ほどの単純な透明合成なので、新たに15種類の描画モードが追加されたと考えられます。 Web ページでは「ノーマル」を含めて合計 16 種類のブレンド モードが利用可能です。

描画モードには多くの種類がありますが、最も一般的に使用されるものは、乗算、スクリーン、オーバーレイ、ソフト ライトです。

ブレンド モードの簡単な原理

ブレンド モードの本質は、前景と背景 (ブレンドに含まれる 2 つのレイヤー) のピクセルをそれぞれ取得し、それらのカラー値を使用することです。数学的な演算を実行し、それによって新しい色の値を取得します。重複領域内の各ピクセルは、この計算プロセスを実行します。

以下では、このプロセスを説明するための例として乗算を使用します。

カラー値の正規化

ブレンド モードではカラー値を使用して数学的計算を実行するため、カラー値は数値の形式である必要があります。しかし、色の値は何の数字に対応するのでしょうか?ブレンド モードの計算では、すべての色の値は 0 から 1 までの 10 進数です (範囲 [0, 1])。したがって、色の値は計算に参加する前にそのような小数に変換されます。

色は RGB で表現できます。たとえば、純粋な白は CSS では rgb(255, 255, 255) と表現できます。なお、RGB 3 つのチャネルの最大値は 255、最小値は 0 であるため、チャネル カラー値 ÷ 255 の計算式を使用して 0 から 1 までの数値に変換できます。たとえば、純粋な白は rgb(1, 1, 1) になります。

チャネルごとに計算します

Multiply (Multiply、日本語版では「乗算」と表記します) の計算式は次のとおりです。

x = a × b

ご覧のとおり、これは単純な乗算です。これらはすべて 0 ～ 1 の間の 10 進数であるため、乗算すると結果の値が 0 に近づきます (たとえば、0.8 x 0.5 = 0.4)。つまり、Multiply は暗くするブレンド モードです。

各描画モードは、このような計算式に対応します。a は前景レイヤー (アクティブ レイヤー)、b は背景レイヤー (バックグラウンド レイヤー) を表します。各 RGB チャネルが 1 回処理されると、混合色の値を取得できます。全体のプロセスは次のとおりです。

レイヤーの透明度が設定されていても、混合計算式の数値はレイヤーの元のピクセル カラーをそのまま使用します (つまり、不透明度が設定されている場合)。 : 1; 色に)。

CSS の使用手順

ブレンド モードに関連する 3 つのプロパティ、background-blend-mode、mix-blend-mode、およびisolationがあります。

background-blend-mode

この属性は、通常、background-image と同様に、複数の背景の background-image と組み合わせて使用​​されます。これにより、次のような特定の要素の複数の背景の混合が形成されます。

.blending-element-0 {    background-image: url(1.jpg), url(2.jpg), url(3.jpg);    background-blend-mode: multiply, screen;}

ご覧のとおり、この要素は複数の背景を指定しており、上から順に 1.jpg、2.jpg、 3.jpg以下のbackground-blend-modeがそれに相当します。 1.jpgのブレンドモードがmultiply、2.jpgのブレンドモードがscreen、3.jpgのブレンドモードがmultiplyであることを意味します(background-blend-の場合)。モード 数値がbackground-imageより小さい場合、値リストに従って繰り返されます)。

背景の下部にある 3.jpg のブレンド モードの乗算 (この要素には背景色がありません) は効果がなく、通常のデフォルト値と見なすことができることに注意してください。 。 Photoshop でレイヤーを 1 つだけ残し、さまざまな描画モードを切り替えてみると、画像がまったく変化しないことがわかります。

要素で背景色が指定されている場合、その背景色が下部の背景になります。

短縮属性backgroundが使用されている場合、background-blend-modeの値はデフォルトにリセットされます。

mix-blend-mode とisolation

これら 2 つの属性は一緒に使用されます。単一要素の複数の背景間に適用される以前のbackground-blend-modeと比較して、mix-blend-modeは複数の要素に適用され、背景に加えて要素内のテキストなどの他のコンテンツも適用されます。混合した。

mix-blend-mode は、要素に作用する場合、この要素のすべての子要素にも作用します。したがって、子要素のコンテンツに影響を与えたくない場合（たとえば、半透明を設定するときに、内部のテキストを不透明のままにしたい場合など）、代わりにbackground-blend-modeを使用する方が適切です。

mix-blend-mode を使用するコードはおおよそ次のようになります:

<div class="container">    <div class="blending-element-1"></div>    <div class="blending-element-2"></div></div>

.blending-element-1,.blending-element-2{    mix-blend-mode: soft-light;}

この例では、div.blending-element-1 と div.blending が存在する限り、 -要素-2 重なりがある場合、ブレンディング効果を得ることができます。では、それは単にこれら 2 つの要素を混ぜ合わせたものなのでしょうか?親要素であるdiv.containerには背景があり、その前後に他の要素があったとしてもそれらもミキシングに参加するのでしょうか？

これは、ミックスに参加する要素を定義する方法です。 Web ページでは次のように行われます。 は、スタッキング コンテキストに基づいて要素をグループ化します。同じスタッキング コンテキスト内の要素は同じグループとしてカウントされ、同じグループ 内で混合が発生する可能性があります。

別の例を見てください (関連する CSS のみがリストされています):

<div class="container">    <div class="inner-wrapper">        <img class="blending-image lazy"  src="/static/imghwm/default1.png"  data-src="1.jpg"  alt="Rorona">    </div></div>

.container {    background: gray;}.blending-image {    mix-blend-mode: multiply;}

効果は次のとおりです:

OK できますdiv.container の灰色の背景と img.blending-image の画像コンテンツにはすでにブレンディング効果があることがわかります。この時点で、中央の要素 div.inner-wrapper にわずかな変更を加えます:

.inner-wrapper{    isolation: isolate;}

ブレンド モードが無効であることがわかります:

見てわかるように、isolation: isolate 属性を使用すると、文字通りの「分離」効果があるようです。

実際には、「孤立」のような特別な効果はなく、その本質は新しいカスケードコンテキストを作成することです。要素合成のこの時点では、新しいグループを開くと考えることができます。グループ化の用途は何ですか?下の図を見てください:

この階層関係は、HTML の DOM ツリーに非常に似ていますが、各ノード (グループ) の生成には、新しいノードを作成するために対応する要素が必要である点が異なります。カスケードコンテキスト。新しいスタッキング コンテキストを作成する要素がない場合、DOM ツリーがどれほど複雑であっても、それらはすべて同じスタッキング コンテキストに属します (つまり、上の図にはグループがなく、レイヤー 1 から 6 が並べて表示されます)。

グループ化により、要素がミックスに参加する順序が変更されます。複雑な DOM ツリーでは、ブレンド モードが設定された要素が複数存在する場合があります。このとき、 は常に最初にグループ内のレイヤーを相互にブレンドし、次にグループ全体を全体として扱い、次にそれをブレンドします。グループ外の他のレイヤー 。 DOM 要素のデフォルトの混合方法は通常、つまり上位層が下位層をブロックするため、グループ内とグループ外が分離されているように見えます。これが分離の意味です。

先ほど、要素間の混合に制御層を追加できるため、分離をミックスブレンドモードで使用できると述べました。 background-blend-mode の場合、background-blend-mode の影響を受ける複数の背景が同じ要素内に配置されているため、分離は役に立ちません。これは、独立したグループ内にあることと同等であり、他の外部要素とは何の関係もありません。

新しいカスケード コンテキストを作成するための詳細な条件については、MDN ドキュメントを参照することをお勧めします。見てわかるように、isolate:isolate; はケースの 1 つにすぎません。

付属のちょっとした特典

ブラウザの互換性

• background-blend-mode

• mix -blend-mode

この記事の時点では、ブラウザのサポートはまだ不十分です。ただし、ブレンド モードは単なる視覚効果です。互換性を持たせたい場合は、まず、ブレンド モードをサポートしていないブラウザでの効果を確認してください。それほどひどくない場合は、受け入れられるかもしれません。このままではだめな場合は、画像素材などで見苦しくならない程度に調整してください。

合成の別のステップ

w3c ドキュメントには、合成が実際には 2 つのステップに分かれていると記載されています。最初のステップはブレンディングで、次に Porter-Duff 合成と呼ばれる 2 番目のステップが続きます。興味があれば、自分で調べてみることもできます。

この Porter-Duff 合成には多くの種類がありますが、CSS に関しては、source-over のみが利用可能です (つまり、固定されています)。これはまさに、前景が背景を覆う効果であり、私たちの視覚体験と最も一致します。

前述したように、描画モードの計算式でとられるカラー値には透明度が考慮されていませんが、実は描画モードを適用する際に透明度を設定することで効果が変わることがわかっています。これは、合成のこの 2 番目のステップで透明度が計算されるためです。

ブレンド モードの計算原理の詳細

Photoshop ブレンド モードの説明を読むことをお勧めします。

結論

興味深いのは、ブレンド モードを使用するときは、ほとんどの場合、見栄えの良いエフェクトが見つかるまで 1 つずつ試していくことです。どの描画モードを使用すればよいか一目でわかると言うよりも。しかし、それでも、ブレンディング モードの原理を少しでも理解しておけば、おそらく、適切なブレンディング モードをより速く見つけることができるはずです。

私の意見では、Web ページのブレンド モードにより、特定の画像素材の編集作業を軽減できると思います。また、元の画像が保存されるため、必要なときにいつでも復元や再合成が可能です。

(ブログを再編集、元のアドレス: http://acgtofe.com/posts/2016/01/blending-modes-adventure/)