CSS ブレンド モードを賢く使用して、テキストを背景色にインテリジェントに適応させます

ページ上にテキストがあります。このテキストを異なる背景色の下に異なる色で表示できますか?これは一般にインテリジェントな色変更としても知られています。次のようになります。

#テキストは、黒の背景では白、白の背景では黒で表示されます。とても複雑な効果のように見えますが、CSS で実装するのは実はとても簡単です。今日はそんな小技を紹介します。CSS では、ミキシング モード

mix-blend-mode:Difference を使用して、テキストをインテリジェントに適応させ、背景色に合わせます。 [推奨学習: css ビデオ チュートリアル ]

mix-blend-mode:Difference

CSS3 に非常に興味深い属性 -- mix- が追加されました。ブレンド モード (mix と Blend の中国語の自由訳が両方ともミックスである場合、この属性の直訳はミックス ブレンド モードです。もちろん、通常はこれをミックス モードと呼びます)。以下の図に示すように、いくつかのミキシング モードがあります。

その中で、この記事の主役は

mix-blend-mode:Difference です。つまり、違いのモデルです。このブレンド モードは、各チャネルのカラー情報を調べ、ベース カラーと描画カラーを比較し、明るいピクセルのピクセル値から暗いピクセルのピクセル値を減算します。

白と混ぜると背景色が反転しますが、黒と混ぜても背景色は変わりません。

簡単に言うと、上のレイヤーの明るい部分は下のレイヤーの色を反転し、暗い部分は通常の色で表示されます。画像＃＃＃。

この混合モードの最も一般的なアプリケーション シナリオは、この記事の冒頭で説明したシナリオであり、テキストを異なる背景色に異なる色で表示できるようになります。

白黒のシーンに最適な、非常にシンプルなデモ:

<div></div>

div {
    height: 100vh;
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);

    &::before {
        content: "LOREM IPSUM";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        mix-blend-mode: difference;
        animation: move 3s infinite linear alternate;
    }
}
@keyframes move {
    0% {
        transform: translate(-30%, -50%);
    }
    100% {
        transform: translate(-70%, -50%);
    }
}

効果は次のとおりです:

##CodePen デモ -- 線形グラデーション ミックス ブレンド モード

もちろん、黒か白である必要はありません。以下の例を見てください。このようなシナリオがあります。場合によっては、背景色の最終的なパフォーマンス値を完全に決定できないことがありますが (背景設定でフロントエンドに渡すこともあります)、テキストがどの背景色でも正常に表示されるようにする必要があります。 mix-blend-mode:difference

を使用してみることもできます。

<ul class="flex-box">
  <div class="box">
    <p>开通会员查看我的VIP等级</p>
  </div>
   // ..... 
</ul>

div {
    // 不确定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

背景色が何であっても、mix-blend-mode:difference が設定された

要素はテキストを通常どおり表示できます:

#CodePen デモ -- mix-blend-mode:difference はテキストの色に適応する背景を実装します

# の欠点 # #mix-blend-mode:difference

もちろん、この方法は完璧ではありません。

mix-blend-mode:difference

の後の色は背景色と重ね合わされるため、正常に表示できても、必ずしも最適な色や表示効果に最適な色であるとは限りません。 ここで実際に使用する場合、白黒以外のシーンでは、選択を行うためにさらに実験が必要になります。

最後に

要約すると、この記事では、CSS混合モードを使用してテキスト適応背景表示を実現するためのちょっとしたテクニックを紹介します。次の記事をもう一度見てください:

信じられないほどのブレンディング モード mix-blend-mode

信じられないほどのブレンディング モード background-blend-mode
• #2 行の CSS コードで画像の任意の色付けテクノロジーを実現
• ##CSS を上手に使ってグラデーション カラーの QR コードを構築する
• CSS のテクニック | ブレンド モードを使用してテキストの中空波効果を実現する
• ##CSS ブレンド モード\フィルターによって引き起こされる CSS 3D エラーの問題を調査する
• CSS アート -- 背景を使用してさまざまな素晴らしい背景を作成します
#さて、この記事はこれで終わりです。お役に立てば幸いです
• 元のアドレス: https://www.cnblogs.com/coco1s/p/16012545.html
• 著者: ChokCoco

  (学習ビデオ共有: Web フロントエンド )

以上がCSS ブレンド モードを賢く使用して、テキストを背景色にインテリジェントに適応させますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。