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

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

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

2 つの DIV の使用

疑似要素をサポートしていない古いブラウザの場合は、代わりに 2 つの DIV を使用できます:

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

.inverted-bar {
    position: relative;
    padding: 10px;
    text-indent: 10px;
}

.inverted-bar:before {
    content: attr(data-content);
    background-color: aqua;
    color: red;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
}

.inverted-bar > div {
    content: attr(data-content);
    background-color: red;
    color: aqua;
    position: absolute;
    padding: 10px 0;
    top: 0;
    left: 0;
    width: 20%;
}

注: 正確な実装特定の要件とブラウザのサポートによって異なる場合があります。

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