Comment 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

Réaliser une inversion de la couleur de la police en fonction de la couleur d'arrière-plan est une exigence de conception courante. Cette question explore comment y parvenir en utilisant CSS.

Solution : Mix-Blend-Mode (prise en charge limitée)

La propriété CSS mix-blend-mode permet le mélange des couleurs en fonction de la couleur d’arrière-plan sous-jacente. Cependant, cette propriété n'est pas prise en charge dans Internet Explorer.

Solution : pseudo-éléments (recommandé)

L'approche recommandée pour la compatibilité entre navigateurs consiste à utiliser des pseudo-éléments ( :avant et :après). En plaçant un pseudo-élément coloré sur le texte et en définissant sa couleur de texte sur la valeur inverse souhaitée, vous pouvez créer l'effet souhaité.

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

Solution : deux DIV (support IE6 et IE7)

Pour une prise en charge supplémentaire entre navigateurs, en particulier pour IE6 et IE7, vous pouvez utiliser deux éléments DIV au lieu de pseudo-éléments. Cela implique de positionner absolument le deuxième DIV sur le premier et de définir son z-index, son opacité et sa couleur d'arrière-plan pour obtenir l'effet souhaité.

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!