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

背景色に基づいてフォントの色を反転する

CSS では、背景色に応じてフォントの色を反転したい場合があります。背景色。以下の画像のような効果が得られます:

[色付きの背景に白と黒のテキストが交互に表示された画像[パネル]

CSS ソリューション:

背景色に基づいてフォントの色を反転するための直接の CSS プロパティは存在しませんが、疑似要素を使用してこれを実現できます。さらに、IE6 や IE7 などの古いブラウザとの互換性を確保するために、疑似要素の代わりに 2 つの DIV を使用できます。

Mix-Blend-Mode プロパティ:

CSS にはmix-blend-mode というプロパティがありますが、Internet Explorer ではサポートされていません。このプロパティを使用すると、前景色 (フォントの色) と背景の色をブレンドして、さまざまな効果を作成できます。ただし、前述したように、ブラウザのサポートが制限されているため、このシナリオでは実用的ではありません。

擬似要素のアプローチ:

擬似要素を使用して交互の色の効果を作成するには、 :before および :after 擬似要素を相対位置を指定して親要素に挿入します。これらの疑似要素のコンテンツを目的のテキストに設定し、背景色を調整します。 :after 疑似要素の幅を制御することで、反転効果を実現できます。

コード例:

.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%;
}

html {
    font-size: 16px;
}

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

このアプローチにより、次のことが可能になります。背景色に応じてフォントの色を反転し、Web デザインに視覚的に魅力的な効果を生み出します。

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