CSS - Getönte Deckkraft

Frage ich mich, ob es möglich ist, zu beantragen Farbton, um eine Opazität in css?

Ich habe ein PNG in verschiedenen Größen. Wenn der Benutzer mit der Maus über die PNG-Datei, möchte ich die PNG zu ändern die Deckkraft auf 0,5 mit einer Tönung von #000. Nach w3schools, Sie haben nur die Möglichkeit, ändern Sie die "Deckkraft" - Wert und nicht den Farbton, die ist immer auf #FFF.

Ich habe versucht, die position einer schwarzen box mit der Deckkraft legen Sie auf der Oberseite meiner PNG und via css hatte es Umschalten zwischen display:none/block; auf PNG schweben. Dies hat nicht funktioniert als meine PNGs nicht rechteckige Bilder und sind verschiedenen Dimensionen Bedeutung der black box nicht nur meine PNG.

Gibt es alternative Lösungen für mein problem?

"Laut w3schools" - genau dort zu stoppen.
Meinst du w3schools ist keine Vertrauenswürdige Quelle, oder dass es keine andere alternative?
Sie sind eine der schlechtesten Ressourcen im world wide web
Ah, ich wusste nicht, dass. Vielen Dank für das lassen mich wissen.
world wide web-lol

InformationsquelleAutor Jon | 2013-05-01

  1. 7

    Webkit-Beispiel: http://jsfiddle.net/5APXu/1/

    div:hover { opacity: .5; -webkit-filter: grayscale(100%) sepia(100%); }

    Diese über die CSS filter-Eigenschaft, das beginnt profitieren Sie von der Unterstützung. Es sind zahlreiche Effekte möglich, so dass Sie wahrscheinlich erreichen Ihre ursprüngliche Wunsch der schwarz/grauen Farbton.

    Perfekt. Danke 🙂
    Kein problem. Beachten Sie, dass die browser-Unterstützung ist nicht vollständig, aber Sie verwenden alte IE-Filter als fallback, und/oder auch das betrachten von SVG-Filter (die haben mehr browser unterstützen bereits). Hängt davon ab, wie viel Mühe Sie setzen in.
    Wird diese Arbeit auf FireFox/IE9+ ?
    Nein, nicht, es sei denn, Sie gehen, um SVG-Bilder (das ist möglicherweise eine viel mehr Arbeit). Sie können, um ähnliche Effekte mit in IE (alle Versionen) mit IE-filtern: msdn.microsoft.com/en-us/library/ms532847(v=vs. 85).aspx. Sie könnten auch einen Blick auf die Maskierung des Bildes mit CSS (ich werde sehen, ob ich kann Graben, bis eine Referenz).
    Danke. Ich bin auch auf der Suche um als gut.

    InformationsquelleAutor Tim Medora

  2. 1

    Können Sie die hintergrund-Farbe um das Bild auf hover-um den Effekt zu bekommen, den Sie wollen. Hier ist ein Beispiel: http://jsfiddle.net/atbnn

    img:hover {
  opacity: 0.5;
  background: #000;
}

    InformationsquelleAutor Stephen Fischer

Schreibe einen Kommentar