Convertir une image en niveaux de gris en HTML/CSS

Question

Y a-t-il un moyen simple d'afficher une image en couleur en niveaux de gris avec juste HTML/CSS?

La compatibilité avec IE n'est pas nécessaire (et je suppose que ce ne sera pas le cas) - si cela fonctionne avec FF3 et/ou Sf3, ça me convient.

Je sais que je peux le faire à la fois avec SVG et Canvas, mais cela semble être beaucoup de travail pour le moment.

Y a-t-il un moyen vraiment paresseux de le faire?

Answer 1

Le support des filtres CSS est disponible dans Webkit. Nous avons maintenant une solution multi-navigateur.

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Désactiver le gris sur survol */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

---

Et qu'en est-il d'Internet Explorer 10?

Vous pouvez utiliser un polyfill comme gray.

Answer 2

Suite à la réponse de brillout.com, et aussi la réponse de Roman Nurik, et en relâchant quelque peu l'exigence "pas de SVG", vous pouvez désaturer les images dans Firefox en n'utilisant qu'un seul fichier SVG et un peu de CSS.

Votre fichier SVG ressemblera à ceci :

Enregistrez-le sous le nom resources.svg, vous pourrez le réutiliser à partir de maintenant pour toute image que vous souhaitez convertir en niveaux de gris.

Dans votre CSS, vous référencez le filtre en utilisant la propriété spécifique à Firefox filter :

.target {
    filter: url(resources.svg#desaturate);
}

Ajoutez également les spécifiques à MS si vous en avez envie, appliquez cette classe à toute image que vous souhaitez convertir en niveaux de gris (fonctionne dans Firefox >3.5, IE8).

edit: Voici un billet de blog intéressant qui décrit l'utilisation de la nouvelle propriété CSS3 filter dans la réponse de SalmanPK en concert avec l'approche SVG décrite ici. En utilisant cette approche, vous aboutiriez à quelque chose comme :

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Ancien WebKit */
    -webkit-filter: grayscale(100%); /* Nouveau WebKit */
    filter: url(resources.svg#desaturate); /* ancien Firefox */
    filter: grayscale(100%); /* Standard actuel en cours de rédaction */
}

Plus d'informations sur la prise en charge des navigateurs ici.

Answer 3

Pour Firefox, vous n'avez pas besoin de créer un fichier filter.svg, vous pouvez utiliser le schéma URI de données.

En reprenant le code css de la première réponse, cela donne :

filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Brouillon actuel */
-webkit-filter: grayscale(100%); /* Nouveau WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

Pensez à remplacer la chaîne "utf-8" par l'encodage de votre fichier.

Cette méthode devrait être plus rapide que les autres car le navigateur n'aura pas besoin de faire une deuxième requête HTTP.

Answer 4

Mise à jour: J'ai créé un dépôt GitHub complet pour ceci, incluant un polyfill JavaScript pour IE10 et IE11: https://github.com/karlhorky/gray

À l'origine, j'utilisais la réponse de SalmanPK, mais j'ai ensuite créé la variation ci-dessous pour éliminer la requête HTTP supplémentaire requise pour le fichier SVG. L'inline SVG fonctionne dans les versions de Firefox 10 et supérieures, et les versions inférieures à 10 ne représentent plus même 1% du marché mondial des navigateurs.

Depuis, j'ai maintenu la solution à jour sur cet article de blog, ajoutant la prise en charge du retour en couleur, le support IE 10/11 avec SVG et un effet partiel de noir et blanc dans la démo.

img.grayscale {
  /* Firefox 10+, Firefox sur Android */
  filter: url("data:image/svg+xml;utf8,#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

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

Answer 5

Si vous êtes capable d'utiliser JavaScript, alors ce script peut être ce que vous recherchez. Il fonctionne sur tous les navigateurs et fonctionne bien pour moi jusqu'à présent. Vous ne pouvez pas l'utiliser avec des images chargées à partir d'un domaine différent.

http://james.padolsey.com/demos/grayscale/