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

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

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

mix-blend-mode:Difference

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

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

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

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

 
 
开通会员查看我的VIP等级
 
 // ..... 

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

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

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

#CodePen デモ -- 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 サイトの他の関連記事を参照してください。