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

Image en niveaux de gris avec CSS & Amp; Recolorer au survol de la souris

Dans cet article, nous explorerons comment obtenir cet effet et assurer la compatibilité entre navigateurs.

CSS pur (en utilisant une seule image colorée)

Pour la première méthode, nous utilisons du CSS pur et une seule image :

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8,..."); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}</code>

Utilisation de SVG

Cette méthode utilise du SVG en ligne pour créer l'effet de niveaux de gris et une image séparée pour la version couleur :

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

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  ...
  <image filter="url(&quot;#filtersPicture&quot;)" ... />
   </svg></code>

JavaScript

Enfin, on peut utiliser JavaScript pour changer la source de l'image au survol :

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

<code class="js">const grayscaleImages = document.querySelectorAll('.grayscale');

grayscaleImages.forEach(image => {
  image.addEventListener('mouseover', () => {
    image.src = 'path/to/color_image.jpg';
  });

  image.addEventListener('mouseout', () => {
    image.src = 'path/to/grayscale_image.jpg';
  });
});</code>

Ces Les méthodes offrent une compatibilité entre navigateurs et vous permettent d'ajouter facilement des effets de niveaux de gris et de survol à vos images.

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!