CSS の背景色に基づいてフォントの色を動的に調整するにはどうすればよいですか?

背景色に基づいて動的なフォントの色を作成する

CSS を使用すると、背景色に基づいてフォントの色を自動的に調整することができます。提供された画像に示されている効果です。

これを実現するには、CSS を使用します。最新のブラウザ間で広くサポートされているプロパティとテクニック:

Mix-Blend-Mode プロパティ:

mix-blend-mode プロパティを使用すると、色を動的にブレンドできます。 Internet Explorer (IE) ではサポートされていないことに注意してください。

疑似要素とクラス名:

代わりに、疑似要素とクラス名を利用して、目的の効果を作成します。子要素を親要素の中に直接配置することで、特定の CSS ルールを適用して、対照的なフォントの色を作成できます。

.inverted-bar {
    position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
    padding: 10px 0;
    text-indent: 10px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-content);
}

.inverted-bar:before {
    background-color: aqua;
    color: red;
    width: 100%;
}

.inverted-bar:after {
    background-color: red;
    color: aqua;
    width: 20%;
}

このスニペットでは、data-content 属性を親要素に割り当て、次を使用します。 CSS を使用して子要素内のテキストを操作します。 :before および :after 擬似要素により、望ましいコントラスト効果が確実に得られます。

HTML 構造:

この手法を利用するには、HTML 構造は次のコードのようにする必要があります。

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

これらの CSS プロパティと擬似要素のアプローチを組み込むことで、環境に適応する動的なフォントの色を効果的に作成できます。背景色が調整され、読みやすくなるように自動的に調整されるユーザー インターフェイス コンポーネントが生成されます。

以上がCSS の背景色に基づいてフォントの色を動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。