背景色に基づいて 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 を使用できます:

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

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