Comment réaliser une transformation d'image en niveaux de gris au survol de la souris avec CSS, garantissant la compatibilité avec IE et Firefox ?

Niveaux de gris et recolorer une image au survol de la souris avec CSS

Défi : Transformer une icône colorée en niveaux de gris et revenir Il se colore lorsque la souris le survole, garantissant ainsi la compatibilité avec IE et Firefox.

Solutions :

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

Cette approche utilise des filtres CSS pour convertir l'image en niveaux de gris. La propriété filter est appliquée à l'élément img avec la classe grayscale.

CSS :

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

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

2. CSS et SVG (avec Inline SVG) :

IE10 prend en charge le SVG en ligne, permettant une solution plus propre. L'image SVG est filtrée à l'aide d'un élément feColorMatrix et l'effet de niveaux de gris est appliqué en définissant la valeur de saturation sur 0.

HTML :

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 377" width="400" height="377">
  <defs>
    <filter id="filtersPicture">
      <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
      <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    </filter>
  </defs>
  <image filter="url(#filtersPicture)" x="0" y="0" width="400" height="377" xlink:href="image.jpg" />
</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!