CSS background-blend-modeの仕組みを深く理解する

この記事は共有および集約することを歓迎します。全文を転載する必要はありません。著作権を尊重してください。サークルはとても小さいです。緊急に必要な場合は、許可を得るためにご連絡ください。

1. 皆さんご存知でしょう

まず、皆さんがご存知かもしれない2つの点をお話しします。

1. background-blend-mode自体には分離特性があります。つまり、要素background-blend-modeと、最終的な効果は現在の要素の背景画像と背景色によってのみ影響を受け、現在の領域にある他の要素の視覚的な影響は受けません。

2. background-blend-modeプロパティを適用すると、画像が互いにブレンドされるだけでなく、背景色ともブレンドされます。

次に、皆さんが知らないかもしれない知識についてお話ししましょう。これはbackground-blend-modeプロパティがこのようにレンダリングされる理由について多くの人が混乱している理由でもあります。

2. 知らないかもしれないこと

1. 背景の順序はブレンド効果に影響します

ブレンディング効果は、 backgroundプロパティ内の背景画像の順序と密接に関係しています。 CSS の複数の背景では、背景画像が構文内で後ほどレベルが低くなります。背景色のレベルは常に最も低いため、 background-color構文の最後に記述しないと有効になりません。

たとえば、次の 2 つの要素:

<div class="ボール"></div>
<div class="ball2"></div>

背景のブレンドモードをオーバーレイに設定しますが、2 つの要素の背景画像の順序は逆になります。コードは次のとおりです。

。ボール {
    幅: 200px; 高さ: 200px;
    境界線の半径: 50%;
    背景: 線形グラデーション(ディープピンク、ディープピンク)、線形グラデーション(ディープスカイブルー、ディープスカイブルー);
    /* オーバーレイブレンドモードを適用 */
    背景ブレンドモード: オーバーレイ;
}
.ボール2 {
    幅: 200px; 高さ: 200px;
    境界線の半径: 50%;
    背景: 線形グラデーション(deepskyblue、deepskyblue)、線形グラデーション(deeppink、deeppink);
    /* オーバーレイブレンドモードを適用 */
    背景ブレンドモード: オーバーレイ;
}

結果は下の図のようになります。 .ball要素はdeeppinkをdeepskyblueに重ねて表され、最終的な混合色は青みがかった色になります。 .ball2要素はdeeppinkをdeepskyblueに重ねて表され、最終的な混合色は紫色になります。

2. 混合効果は、複数の混合属性が同時に作用した結果である。

多くの開発者は、 background-blend-mode実際には異なる背景画像に対応する複数のブレンドモード値をサポートしていることに気づいていません。これは、単一のブレンドモード値のみをサポートするmix-blend-modeプロパティとは異なります。例えば：

。ボール {
    背景: 線形グラデーション(ディープピンク、ディープピンク)、 
        線形グラデーション(ディープスカイブルー、ディープスカイブルー);
    背景ブレンドモード: オーバーレイ;
}

実際には以下と同等です:

。ボール {
    背景: 線形グラデーション(ディープピンク、ディープピンク)、 
        線形グラデーション(ディープスカイブルー、ディープスカイブルー);
    背景ブレンドモード: オーバーレイ オーバーレイ;
}

つまり、 deeppink実際には deepskyblue と背景色 (この場合は透明) を重ね合わせ、 deepskyblue背景色 (この場合は透明) を重ね合わせます。

つまり、各背景画像には実際には独自のブレンドモード値があり、これはmix-blend-modeプロパティとは大きく異なります。通常、 mix-blend-modeプロパティを使用する場合、ブレンドモードは最上位の要素にのみ設定され、各要素のレイヤーには設定されません。これによりbackground-blend-mode 。

background-blend-modeプロパティの複数の値がどのように背景画像に 1 つずつ対応するかを例を使って説明します。

<div class="box"></div>

。箱 {
    幅: 200px; 高さ: 200px;
    背景: 線形グラデーション(右下、濃いピンク 50%、透明 50%)、
        線形グラデーション（右上に濃いピンク 50%、透明 50%）、 
        ダークブルー;
    背景ブレンドモード: 乗算、スクリーン;
    位置: 相対的;
}
/* 中央の元のディープピンクの色値 */
.box::before {
    コンテンツ： '';
    位置: 絶対;
    幅: 33%; 高さ: 33%;
    インセット: 0;
    マージン: 自動;
    背景色: ディープピンク;
}

この時点で、 .box要素は合計 5 色を表します。各色の RGB カラー値とその生成方法は次の図に示されています。

で：

中央の通し番号①の四角い部分は、ブレンドモードを適用しておらず、色はdeeppinkです。これは、領域③と領域⑤の色との比較を容易にするためのものです。

領域②は背景色darkblueです。この領域は2つの対角グラデーションで覆われていないため、設定された背景色がそのまま現れます。
領域 ③ と ⑤ は下層グラデーション、つまりbackground属性値の後ろのグラデーションです。対応するブレンドモードもbackground-blend-mode属性値の後ろのもの、つまりscreen 、つまり色を明るくできるカラーフィルタモードです。
領域 ④ と領域 ⑤ は上部グラデーション、つまり、 background属性値が前面にあるグラデーションです。対応するブレンドモードもbackground-blend-mode属性値が前面にあるもの、つまり、 multiply 、つまりポジフィルムオーバーレイモードであり、色を暗くすることができます。
領域 ③ の色は、グラデーションカラーdeeppinkと背景色darkblueのカラーフィルタリング効果によるものです。最終的な色はdeeppinkよりも明るいことがわかります。最終的な混合色値はrgb(255,20,206)です。
領域 ④ の色は、グラデーションカラーdeeppinkと背景色darkblue重ねて混ぜた効果によるものです。最終的な色はdarkblueよりも暗いことがわかります。最終的な混合色の値はrgb(0,0,80)です。
エリア ⑤ が最も複雑です。これを理解すれば、ほとんどのbackground-blend-modeプロパティのレンダリングパフォーマンスも理解できるようになります。
エリア⑤には合計3つのレイヤーがあり、上層はdeeppink 、ブレンドモードはmultiply 、下層はdeeppink 、ブレンドモードはscreen 、最下層の背景色はdarkblue 。

したがって、最終的なカラー値は、上層のdeeppinkと下層のdeeppinkをmultiplyカラー値と、背景色のdarkblueとscreenを混合したカラー値になります。

下地のdeeppinkと背景色のdarkblueのカラー値をscreen領域③の色になります。したがって、領域⑤の色は、 deeppinkの色値と領域③の色値rgb(255,20,206)を掛け合わせた値となり、結果はrgb(255,1,119)となります。

以上が.box要素の5色の原理です。

3. 背景ブレンドモードとグラデーションアイコンの実装

最後に、ほとんどの人がbackground-blend-modeを使用してグラデーションアイコンの効果を実現できない理由を見てみましょう。

たとえば、今、非常に暗い色の小さな削除アイコンがあります。理論的には、 lighten効果は明るい色を使用することであるため、 lightenブレンドモードを使用してグラデーション効果を実現できます。アイコン自体は非常に暗いため、間違いなくグラデーション色が表示されます。アイコンに白い背景を追加するだけです。したがって、このアイデアに従って、多くの人が以下に示すように CSS コードを記述しました。

.アイコンを削除{
    背景: 線形グラデーション(ディープスカイブルー、ディープピンク)、 
        url(delete.png)、白;
    背景ブレンドモード: 明るくする;
}

一見、論理的に申し分ないように思えます。グラデーションと白い背景の黒いアイコンを混ぜて、色を明るくしています。どう考えても、黒いアイコンもグラデーションカラーになるはずです。残念ながら、最終的なグラデーションはグラデーションカラーではなく、純白です。なぜこのようなことが起こるのでしょうか。

これは、ここでのbackground-blend-mode:lighten実際には省略形または略語であるためです。実際に計算された値はlighten lightenです。コードは次のとおりです。

.アイコンを削除{
    背景: 線形グラデーション(ディープスカイブルー、ディープピンク)、 
        url(delete.png)、白;
    /* 実際の計算値 */
    背景ブレンドモード: 明るくする 明るくする;
}

つまり、削除アイコンdelete.pngもブレンドモードlightenが適用され、白い背景色と混合されるため、純白になります。

問題がわかったので、解決方法もわかりました。非常に簡単です。元のアイコンの外観を維持しながら、 delete.pngと白い背景色をブレンドするだけです。次の 2 つの CSS メソッドの両方を使用できます。

.アイコンを削除{
    背景: 線形グラデーション(ディープスカイブルー、ディープピンク)、 
        url(delete.png)、白;
    /* PNGアイコンのブレンドモードを暗く設定します */
    background-blend-mode: 明るくする 暗くする;
}

または：

.アイコンを削除{
    背景: 線形グラデーション(ディープスカイブルー、ディープピンク)、 
        url(delete.png)、白;
    /* PNGアイコンのブレンドモードを通常に設定します */
    background-blend-mode: 明るくする通常;
}

より賢く、パフォーマンスも優れているため、 normalキーワードを使用することをお勧めします。最終的な効果は下の図に示されています。

もちろん、グラデーションアイコン効果を実現する最良の方法は、間違いなくCSS mask属性です。ここでブレンドモードを使用して実装されたグラデーションアイコンは白い背景になりますが、これは完璧な実装方法ではありません。主な目的は、 background-blend-mode属性のレンダリングの詳細をすべての人に理解してもらうことです。

IV. 背景ブレンドモードの補完ルール

background-blend-modeプロパティ値の数がbackground-imageと一致しない場合は、次のルールが適用されます。

background-blend-mode値の数がbackground-imageより多い場合、余分なブレンドモードは無視されます。例:

。例 { 
    背景: 線形グラデーション(ディープスカイブルー、ディープピンク)、白;
    background-blend-mode: 明るくする、暗くする;
}

は以下と同等です:

。例 { 
    背景: 線形グラデーション(ディープスカイブルー、ディープピンク)、白;
    背景ブレンドモード: 明るくする;
}

background-blend-mode値の数がbackground-imageより少ない場合、完全なbackground-blend-modeプロパティ値が補完のために繰り返されます。例:

。例 { 
    背景: 線形グラデーション(ディープスカイブルー、ディープピンク)、 
        線形グラデーション(ディープスカイブルー、ディープピンク)、
        線形グラデーション(ディープスカイブルー、ディープピンク)、白;
    background-blend-mode: 明るくする、暗くする;
}

は以下と同等です:

。例 { 
    背景: 線形グラデーション(ディープスカイブルー、ディープピンク)、 
        線形グラデーション(ディープスカイブルー、ディープピンク)、
        線形グラデーション(ディープスカイブルー、ディープピンク)、白;
    background-blend-mode: 明るくする、暗くする、明るくする;
}

つまり、最後のブレンドモード値を繰り返すのではなく、 lighten, darkenが一緒に繰り返されます。したがって、完了の価値はlighten 。

V. 結論

CSS のbackground-blend-modeプロパティを使用すると、個々の背景画像間にブレンドモードを適用できます。

background-blend-modeプロパティはmix-blend-modeプロパティよりも使用頻度が大幅に低くなります。

その理由は次のとおりです。

1. 現実世界の写真画像は、バリアフリーのアクセスに適さないため、背景background-imageとして表示されることはほとんどありません。ハイブリッドモード設計の本来の目的は、このような写真画像を処理することです。

2. background-blend-modeプロパティの動作メカニズムはmix-blend-modeプロパティほど単純ではなく、多くの開発者はそれを十分に習得できません。たとえば、透明な背景の小さなアイコンをグラデーションアイコンに変換するには、ブレンドモードを使用します。多くの人がmix-blend-modeプロパティを使用してこれを実現しますが、 background-blend-modeプロパティを使用してこれを実現できる人はほとんどいません。

したがって、 background-blend-modeプロパティは、CSS の背景テクスチャを豊かにするためによく使用されます。次に例を示します。

これはこの記事の主題ではないので、詳細には触れません。

この記事のアドレス: https://www.zhangxinxu.com/wordpress/?p=9499

CSS background-blend-mode の動作メカニズムを詳しく解説したこの記事はこれで終わりです。CSS background-blend-mode の動作メカニズムの詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL構成SSL証明書ログインの実装

>>: HTML タグのコンテンツを編集するには、contenteditable 属性を設定します (textarea を置き換えることができます)