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

Création de couleurs de police dynamiques basées sur les couleurs d'arrière-plan

En utilisant CSS, il est possible d'ajuster automatiquement la couleur de la police en fonction de la couleur d'arrière-plan, en imitant l'effet montré dans l'image fournie.

Pour y parvenir, nous utiliserons des propriétés et des techniques CSS largement prises en charge dans les systèmes modernes. navigateurs :

Propriété Mix-Blend-Mode :

Bien que la propriété mix-blend-mode permette de mélanger les couleurs de manière dynamique, il est important de noter qu'elle n'est pas prise en charge par Internet Explorer (IE).

Pseudo-éléments et classe Noms :

Au lieu de cela, nous exploiterons des pseudo-éléments et des noms de classe pour créer l'effet souhaité. En plaçant un élément enfant directement à l'intérieur d'un élément parent, nous pouvons appliquer des règles CSS spécifiques pour créer une couleur de police contrastée :

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

Dans cet extrait, nous attribuons l'attribut data-content à un élément parent et utilisons CSS pour manipuler le texte dans ses éléments enfants. Les pseudo-éléments :before et :after assurent l'effet de contraste souhaité.

Structure HTML :

Pour utiliser cette technique, la structure HTML doit ressembler au code suivant :

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

En incorporant ces propriétés CSS et l'approche des pseudo-éléments, nous créons efficacement des couleurs de police dynamiques qui s'adaptent à la couleur d'arrière-plan, ce qui donne lieu à un composant d'interface utilisateur qui s'ajuste automatiquement. pour une meilleure lisibilité.

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!