Maison > interface Web > tutoriel CSS > 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 ?

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 ?

Barbara Streisand
Libérer: 2024-10-26 13:42:32
original
206 Les gens l'ont consulté

How to achieve grayscale image transformation on mouse hover with CSS, ensuring compatibility with IE and 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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal