web-dev-qa-db-fra.com

Comment désaturer et saturer une image avec CSS?

Mettre à jour 

Je viens de me rendre compte que la désaturation ne fonctionne que sous Chrome. Comment puis-je le faire fonctionner dans FF, IE et d'autres navigateurs? (Titre modifié)

Je convertis une image couleur en niveaux de gris en suivant les suggestions ci-dessous: Convertit une image en niveaux de gris au format HTML/CSS

Et cela fonctionne très bien (sous Chrome): http://jsfiddle.net/7mNEC/

<img src="https://imagizer.imageshack.us/v2/350x496q90/822/z7ds.jpg" />

// CSSS
img {
    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");
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray; 
}

img:hover {
    filter: none;
    cursor: pointer;
}

Mais je ne suis pas en mesure de supprimer la désaturation, par exemple. souris sur. 

Des idées à ce que je fais mal?

html5imagecss3grayscale
18
Steven

Il vous suffit d'inverser les niveaux de gris pour chaque propriété CSS de préfixe de navigateur:

img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
    cursor: pointer;
}

http://jsfiddle.net/7mNEC/1/

25
Alex W

C'est plus cool si vous ajoutez une transition comme celle-ci:

  img {
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;
  }
  img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
  }
4
Samuel Ramzan

Étant donné que cette question concerne saturation, le filtre saturate() est peut-être plus approprié. Cela permet également d'obtenir des couleurs sursaturées (valeurs supérieures à 100%):

img {
    filter: saturate(0%);
}
img:hover {
    filter: saturate(300%);
}

http://jsfiddle.net/7mNEC/390/

2
Sphinxxx