Image en niveaux de Gris avec CSS & re-coloration sur le passage de la souris?
Je suis à la recherche de prendre une icône est de couleur (et aura un lien) et de le transformer en niveaux de gris jusqu'à ce que l'utilisateur place la souris sur l'icône (où elle serait alors la couleur de l'image).
Est-ce possible de le faire, et d'une manière qui est IE & Firefox pris en charge?
- Presque dupliqué... stackoverflow.com/q/609273/670377
Vous devez vous connecter pour publier un commentaire.
Il existe de nombreuses méthodes pour arriver à ce résultat, que je vais vous décrire en détail avec quelques exemples ci-dessous.
Pure CSS (à l'aide d'une seule image couleur)
CSS:
HTML:
Vous pouvez trouver un article relatif à cette technique ici.
Pure CSS (à l'aide d'une échelle de gris et couleur des images)
Cette approche nécessite deux copies d'une image: un en niveaux de gris et l'autre en couleur. À l'aide de la CSS
:hover
psuedoselector, vous pouvez mettre à jour le fond de votre élément de basculer entre les deux:CSS:
HTML:
Cela peut également être réalisé à l'aide d'un Javascript hover effet comme jQuery
hover()
fonctionnent de la même manière.Envisager une Bibliothèque Tierce
La désaturer bibliothèque est une bibliothèque commune qui vous permet de passer facilement d'une version en niveaux de gris et plein de couleur version d'un élément donné ou d'une image.
La réponse ici: Convertir une image en niveaux de gris en HTML/CSS
Vous n'avez même pas besoin d'utiliser deux images qui sonne comme une douleur ou une manipulation de l'image de la bibliothèque, vous pouvez le faire avec la croix-prise en charge du navigateur (version actuelle) et il suffit d'utiliser les CSS. C'est une approche d'amélioration progressive qui tombe tout juste de retour de versions de couleur sur les anciens navigateurs:
et des filtres.svg fichier comme ceci:
J'utilise le code suivant sur http://www.diagnomics.com/
Transition en douceur de b/w couleur avec effet loupe (à l'échelle)
Voici une démo. Fonctionne même dans IE7:
http://james.padolsey.com/demos/grayscale/
et
http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/
Vous pouvez utiliser un sprite qui a à la fois de la version de la couleur et monochrome—stockées sur elle.