Comment obtenir des niveaux de gris avec la restauration des couleurs au survol de la souris à l'aide de CSS ?

Échelle de gris avec restauration des couleurs au survol de la souris à l'aide de CSS

Obtenir une apparence en niveaux de gris avec restauration des couleurs au survol de la souris est possible grâce à diverses méthodes , offrant une compatibilité entre navigateurs dans IE et Firefox.

Méthode 1 : CSS pur (utilisation d'une image d'une seule couleur)

Cette technique utilise la propriété de filtre avec le fournisseur préfixes pour mettre en niveaux de gris l'image dans tous les navigateurs pris en charge :

<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>

Méthode 2 : CSS pur (utilisation de deux images)

Une autre approche consiste à utiliser deux images : une échelle de gris version et une version colorée. L'image en niveaux de gris est initialement affichée et l'état de survol passe à l'image colorée :

<code class="css">img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}</code>

<code class="html"><img class="grayscale" src="grayscale_image.jpg">
<img class="colored" src="colored_image.jpg"></code>

Méthode 3 : SVG avec filtres CSS

Pour IE10 et les navigateurs modernes, le SVG en ligne peut être utilisé pour appliquer des filtres, permettant de contrôler dynamiquement l'effet d'échelle de gris :

<code class="css">svg image {
  transition: all .6s ease;
}

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

<code class="xml"><svg ...>
  <defs>
    <filter id="filtersPicture">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image filter="url(#filtersPicture)" ... />
</svg></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!