Инвертировать цвет шрифта 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%;
}

Использование двух DIV

Для старых браузеров, которые не поддерживают псевдоэлементы, вместо этого можно использовать два 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%;
}

Примечание: Точная реализация может варьироваться в зависимости от ваших конкретных требований и поддержки браузера.