Comment puis-je créer une image en niveaux de gris avec CSS qui se recolore au survol de la souris ?

Niveaux de gris d'image avec CSS et recoloration au survol de la souris

Vous pouvez obtenir des niveaux de gris d'image avec CSS et recolorer au passage de la souris en utilisant plusieurs méthodes. Voici un aperçu :

CSS pur (utilisation d'une image d'une seule couleur)

Utilisez des filtres CSS pour convertir l'image en niveaux de gris et supprimer l'effet au survol de la souris :

<code class="css">img.grayscale {
  filter: grayscale(100%);
}

img.grayscale:hover {
  filter: none;
}</code>

Combinaison de CSS et JavaScript

Créez une image en niveaux de gris et une image colorée, et activez leur visibilité lors des événements d'entrée et de sortie de la souris :

<code class="css">img.grayscale {
  opacity: 1;
}

img.colored {
  opacity: 0;
}</code>

<code class="js">document.querySelector('img').addEventListener('mouseover', () => {
  document.querySelector('img.colored').style.opacity = 1;
  document.querySelector('img.grayscale').style.opacity = 0;
});

document.querySelector('img').addEventListener('mouseout', () => {
  document.querySelector('img.colored').style.opacity = 0;
  document.querySelector('img.grayscale').style.opacity = 1;
});</code>

Utilisation de filtres SVG (IE10 uniquement)

Utilisez SVG en ligne avec des filtres pour appliquer un effet de saturation et modifiez-le au survol de la souris :

<code class="html"><svg>
  <defs>
    <filter id="grayscale">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image filter="url(#grayscale)" ... />
</svg></code>

En ajustant la valeur de saturation, vous pouvez contrôler le niveau de niveaux de gris. Cette méthode est prise en charge dans IE10 et versions ultérieures.

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!