Inverser la couleur de la police CSS en fonction de la couleur d'arrière-plan

En CSS, il n'existe aucune propriété directe qui vous permet d'inverser la couleur de la police en fonction de la couleur de fond. Cependant, il existe diverses techniques que vous pouvez utiliser pour obtenir cet effet.

Utilisation de pseudo-éléments

Les pseudo-éléments peuvent être utilisés pour créer un wrapper autour du texte, ce qui vous pouvez ensuite coiffer indépendamment. Par exemple :

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

Utiliser deux DIV

Pour les navigateurs plus anciens qui ne prennent pas en charge les pseudo-éléments, vous pouvez utiliser deux DIV à la place :

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

Remarque : La mise en œuvre exacte peut varier en fonction de vos besoins spécifiques et de la prise en charge du navigateur.