webentwicklung-frage-antwort-db.com.de

Wie sättige und sättige ich ein Bild mit CSS?

Update 

Mir wurde gerade klar, dass die Entsättigung nur in Chrome funktioniert. Wie mache ich es in FF, IE und anderen Browsern? (Überschrift geändert)

Ich konvertiere ein Farbbild in Graustufen, indem ich die folgenden Vorschläge befolge: Konvertieren Sie ein Bild in HTML/CSS in Graustufen

Und es funktioniert großartig (in 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;
}

Ich kann die Entsättigung jedoch nicht entfernen, z. Maus über 

Irgendwelche Ideen, was ich falsch mache?

html5imagecss3grayscale
18
Steven

Sie müssen lediglich die Graustufen für jede CSS-Eigenschaft des Browserpräfixes umkehren:

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

Es ist kühler, wenn Sie einen Übergang wie folgt hinzufügen:

  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

Da es sich bei dieser Frage um Sättigung handelt, kann der saturate() Filter besser passen. Dies ermöglicht auch supergesättigte Farben (Werte über 100%):

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

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

2
Sphinxxx