Comment puis-je inverser la couleur de la police CSS en fonction de la couleur d'arrière-plan ?

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

Des pseudo-éléments peuvent être utilisés pour créer un wrapper autour du texte, 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%;
}

Utilisation de deux DIV

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

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

Remarque : La mise en œuvre exacte peut varier en fonction de vos besoins spécifiques et de votre navigateur. soutien.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!