ホームページ > 記事 > ウェブフロントエンド > CSS ブレンド モードを賢く使用して、テキストを背景色にインテリジェントに適応させます
ページ上にテキストがあります。このテキストを異なる背景色の下に異なる色で表示できますか?これは一般にインテリジェントな色変更としても知られています。次のようになります。
mix-blend-mode:Difference を使用して、テキストをインテリジェントに適応させ、背景色に合わせます。 [推奨学習:
css ビデオ チュートリアル ]
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
最後に
要約すると、この記事では、CSS混合モードを使用してテキスト適応背景表示を実現するためのちょっとしたテクニックを紹介します。次の記事をもう一度見てください:
(学習ビデオ共有: Web フロントエンド )
以上がCSS ブレンド モードを賢く使用して、テキストを背景色にインテリジェントに適応させますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。