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

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

En CSS, vous pouvez rencontrer un scénario dans lequel vous souhaitez inverser la couleur de la police en fonction de la couleur d'arrière-plan, obtenant un effet similaire à l'image ci-dessous :

[Image avec une alternance de texte blanc et noir sur fond coloré panels]

Solution CSS :

Bien qu'il n'existe pas de propriété CSS directe pour inverser la couleur de la police en fonction de la couleur d'arrière-plan, vous pouvez y parvenir en utilisant des pseudo-éléments. De plus, pour la compatibilité avec les navigateurs plus anciens comme IE6 et IE7, vous pouvez utiliser deux DIV au lieu de pseudo-éléments.

Propriété Mix-Blend-Mode :

CSS a un propriété appelée mix-blend-mode, mais elle n'est pas prise en charge par Internet Explorer. Cette propriété vous permet de mélanger les couleurs de premier plan (couleur de police) et d’arrière-plan pour créer divers effets. Cependant, comme mentionné, sa prise en charge limitée par le navigateur le rend moins pratique pour ce scénario.

Approche des pseudo-éléments :

Pour créer l'effet de couleur alternée à l'aide de pseudo-éléments, insérez un pseudo-élément :before et :after sur un élément parent avec une position relative. Définissez le contenu de ces pseudo-éléments sur le texte souhaité et ajustez leurs couleurs d'arrière-plan. En contrôlant la largeur du pseudo-élément :after, vous pouvez obtenir l'effet d'inversion.

Exemple de code :

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

html {
    font-size: 16px;
}

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

Cette approche vous permet de inversez la couleur de la police en fonction de la couleur d'arrière-plan, créant ainsi un effet visuellement attrayant dans vos conceptions Web.

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!