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

Niveaux de gris CSS avec recoloration au survol de la souris

Requête :

Créer une image initialement en niveaux de gris, mais qui passe à couleur lorsque la souris passe dessus. Implémentez-le à l'aide de techniques CSS compatibles avec IE et Firefox.

Solutions :

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

Cette méthode utilise des filtres CSS pour obtenir l'effet de niveaux de gris et supprime le filtre au survol pour révéler la couleur d'origine :

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ &amp; Safari 6+ */
}

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

SVG en ligne avec transitions CSS :

Cette approche intègre un élément SVG avec une image et applique du CSS transitions pour s'estomper entre les niveaux de gris et la couleur au survol :

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
  -webkit-transition: all .6s ease;
  -webkit-backface-visibility: hidden;
}

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

svg {
  background: url(https://image-source.jpg);
}

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}</code>

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!