Cum pot desatura și satura o imagine folosind CSS? (Programare, Html, Imagine, Css, Grayscale)

Steven a intrebat.

Actualizare

Tocmai mi-am dat seama că desaturarea funcționează doar în Chrome. Cum fac să funcționeze în FF, IE și alte browsere? (Titlul a fost schimbat)


Convertesc o imagine color în gri urmând sugestiile de aici: Conversia unei imagini în tonuri de gri în HTML/CSS

Și funcționează foarte bine (în 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;
}

Dar nu reușesc să înlătur desaturarea la trecerea mouse-ului, de exemplu.

Aveți vreo idee la ce greșesc?

3 răspunsuri
Alex W

Trebuie doar să inversezi scala de gri pentru fiecare proprietate CSS cu prefixul browserului:

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/

Comentarii

  • Minunat, a funcționat. Dar vezi de ce nu merge desaturarea în FF și IE? –  > Por Steven.
  • @Steven Se pare că Firefox nu acceptă complet filter spec încă pentru că nu s-a consolidat suficient. IE 9 depreciat -ms-filter și IE 10 nu o suportă. –  > Por Alex W.
  • Ei bine, imaginea este neplăcută, dar sfatul este destul de util. Mulțumesc! –  > Por Sergio.
Sphinxxx

Din moment ce această întrebare se referă la saturație, , se poate obține saturate() filtru poate fi mai potrivit. Acesta permite, de asemenea, culori suprasaturate (valori peste 100%):

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

https://jsfiddle.net/t1jeh8aL/

Comentarii

  • Ești jsfiddle este stricat. –  > Por N-ate.
  • @N-ate Mulțumesc, reparat. –  > Por Sphinxxx.
Samuel Ramzan

Este mai cool dacă adăugați o tranziție ca aceasta:

  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%);
  }