Question Convertir une image en niveaux de gris en HTML / CSS


Y at-il un moyen simple d'afficher un bitmap de couleur en niveaux de gris avec juste HTML/CSS?

Il n'a pas besoin d'être compatible avec IE (et j'imagine que ce ne sera pas le cas) - si ça fonctionne en FF3 et / ou Sf3, ça me suffit.

Je sais que je peux le faire avec les deux SVG et Toile, mais cela semble beaucoup de travail en ce moment.

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


576
2018-03-04 04:51


origine


Réponses:


La prise en charge des filtres CSS a atterri dans Webkit.  Nous avons donc maintenant une solution cross-browser.

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

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}
<img src="http://lorempixel.com/400/200/">


Qu'en est-il d'Internet Explorer 10?

Vous pouvez utiliser un polyfill comme gris.


675
2017-10-26 23:45



À partir de La réponse de brillout.com, et aussi La réponse de Roman Nuriket en relâchant un peu l'exigence «pas de SVG», vous pouvez désaturer les images dans Firefox en utilisant seulement un seul fichier SVG et quelques CSS.

Votre fichier SVG ressemblera à ceci:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

Enregistrer cela sous resources.svg, il peut être réutilisé à partir de maintenant pour toute image que vous voulez changer en niveaux de gris.

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

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

Ajoutez les MS propriétaires aussi si vous en avez envie, appliquer cette classe à n'importe quelle image que vous voulez convertir en niveaux de gris (fonctionne dans Firefox> 3.5, IE8).

modifier: Voici un joli blog qui décrit l'utilisation du nouveau CSS3 filter propriété dans la réponse de SalmanPK de concert avec l'approche SVG décrite ici. En utilisant cette approche, vous vous retrouveriez avec quelque chose comme:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

Plus d'informations de support du navigateur ici.


126
2017-11-30 06:57



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

Prendre le code CSS de la première réponse donne:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

Prenez soin de remplacer la chaîne "utf-8" par votre encodage de fichier.

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


85
2017-11-01 19:32



Mettre à jour: J'ai fait cela dans un repo GitHub complet, y compris le polyfill JavaScript pour IE10 et IE11: https://github.com/karlhorky/gray

J'ai d'abord utilisé La réponse de SalmanPK, mais a ensuite créé la variation ci-dessous pour éliminer la requête HTTP supplémentaire requise pour le fichier SVG. Le SVG en ligne fonctionne dans les versions 10 et supérieures de Firefox, et les versions inférieures à 10 ne représentent même plus 1% du marché mondial des navigateurs.

J'ai depuis maintenu la solution à jour sur ce blog, ajoutant la prise en charge du retour à la couleur, du support IE 10/11 avec SVG et de l'échelle de gris partielle dans la démo.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#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%);
}

24
2017-12-08 15:41



Si vous êtes capable d'utiliser JavaScript, alors ce script peut être ce que vous cherchez. Cela marche cross browser et fonctionne bien pour moi jusqu'à présent. Vous ne pouvez pas l'utiliser avec des images chargées depuis un autre domaine.

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


14
2018-03-05 16:04



Juste eu le même problème aujourd'hui. J'ai d'abord utilisé SalmanPK solution mais a découvert que l'effet diffère entre FF et d'autres navigateurs. En effet, la matrice de conversion fonctionne uniquement sur la luminosité, contrairement aux filtres dans Chrome / IE. À ma grande surprise, j'ai découvert que la solution alternative et plus simple de SVG fonctionne aussi en FF4 + et donne de meilleurs résultats:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

Avec css:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

Une autre mise en garde est que IE10 ne supporte plus "filter: gray:" en mode conforme aux normes, donc le mode compatibilité doit basculer dans les en-têtes pour fonctionner:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

11
2018-06-11 04:05



Ne semble pas possible (encore), même avec CSS3 ou propriétaire -webkit- ou -moz- Propriétés CSS

Cependant, j'ai trouvé ce post de juin dernier qui utilisait des filtres SVG en HTML. Non disponible dans tous les navigateurs actuels (la démonstration faisait allusion à une version personnalisée de WebKit), mais très impressionnante comme preuve de concept.


7
2018-04-28 05:23



Pour les personnes qui posent des questions sur le support IE10 + ignoré dans d'autres réponses, cochez cette partie de CSS:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

Appliqué sur ce balisage:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" 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(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

Pour plus de démos, consultez IE testdrive's Section CSS3 Graphics et ce vieux blog IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx


7
2017-10-26 18:58