Bild Graustufen mit CSS & beim Mouse-Over neu färben?

85

Ich möchte ein Symbol nehmen, das farbig ist (und ein Link sein wird) und es in Graustufen drehen, bis der Benutzer seine Maus über das Symbol legt (wo es dann das Bild färben würde).

Ist dies möglich und auf eine Weise, die von IE & Firefox unterstützt wird?

css mouseover grayscale Meta
quelle
2
Fast dupliziert ... stackoverflow.com/q/609273/670377
Tom Sarduy
Wäre es nicht interessanter, wenn Sie es umgekehrt machen würden? Lassen Sie den Mauszeiger wie einen Zauberstab wirken, der einer dunklen Welt Farbe verleiht?
X10D

Antworten:

241

Es gibt zahlreiche Methoden, um dies zu erreichen, die ich im Folgenden anhand einiger Beispiele erläutern werde.

Reines CSS (mit nur einem farbigen Bild)

img.grayscale {
  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"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

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

Code-Snippet anzeigen

Sie können finden , einen Artikel zu dieser Technik hier bezogen .

Reines CSS (mit Graustufen und farbigen Bildern)

Für diesen Ansatz sind zwei Kopien eines Bildes erforderlich: eine in Graustufen und eine in Vollfarbe. Mit dem CSS- :hoverPseudoselector können Sie den Hintergrund Ihres Elements aktualisieren, um zwischen den beiden umzuschalten:

#yourimage { 
    background: url(../grayscale-image.png);
}
#yourImage:hover { 
    background: url(../color-image.png};
}

Code-Snippet anzeigen

Dies könnte auch erreicht werden, indem hover()auf die gleiche Weise ein Javascript-basierter Hover-Effekt wie die Funktion von jQuery verwendet wird .

Betrachten Sie eine Bibliothek eines Drittanbieters

Die entsättigte Bibliothek ist eine allgemeine Bibliothek, mit der Sie einfach zwischen einer Graustufenversion und einer Vollfarbversion eines bestimmten Elements oder Bilds wechseln können.

Rion Williams
quelle
Wenn diese Bilder mit einer anderen Website verknüpft werden müssen, wie kann dies geschehen, wenn die Bilder als Hintergrund festgelegt sind?
Meta
1
Es würde genauso funktionieren. Schauen Sie sich die Demo unter Abschnitt 1 an. Wenn Sie weitere Fragen haben, helfe ich Ihnen gerne weiter.
Rion Williams
1
Jungs, hat jemand bemerkt, dass dies auf Safari nicht funktioniert? Ich habe dieses Problem gerade überprüft und gefunden. Gibt es eine Möglichkeit, es zu beheben?
Gajen
13

Hier beantwortet: Konvertieren Sie ein Bild in HTML / CSS in Graustufen

Sie müssen nicht einmal zwei Bilder verwenden, die wie ein Schmerz oder eine Bildbearbeitungsbibliothek klingen. Sie können dies mit browserübergreifender Unterstützung (aktuelle Versionen) tun und einfach CSS verwenden. Dies ist ein progressiver Verbesserungsansatz, der nur auf Farbversionen älterer Browser zurückgreift:

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

und filter.svg Datei wie folgt:

<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>
Uriah Blatherwick
quelle
5

Ich verwende den folgenden Code auf http://www.diagnomics.com/

Reibungsloser Übergang von s / w zu Farbe mit Vergrößerungseffekt (Skala)

    img.color_flip {
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .5s ease-in-out;
    }

    img.color_flip:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.1);
    }
Stefan Gruenwald
quelle
Funktioniert hervorragend in Webkit-Browsern! Ihr Code funktioniert bei mir im Firefox-Browser nicht, aber ich denke, er hat etwas mit einer SVG-Datei zu tun, und ich verwende eine Bitmap in dieser Geige Jsfiddle.net/coolwebs/num04rya/10 Etwas Seltsames - der Übergang Effekt in Safari macht das Bild "Ruck" auf Rollover ....
Ryan Coolwebs
-1

Sie können ein Sprite verwenden, in dem beide Versionen - die farbige und die monochrome - gespeichert sind.

Feeela
quelle