Ich habe eine PNG-Datei und ich möchte die schwarze Farbe der Objekte auf Weiß bei Hover invertieren.Problem mit der Invertierung von Schwarz nach Weiß PNG
ich bereits versucht, ist dies
img:hover {
-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);
}<img src="http://goproweb.ca/new/img/new/11.png">Das sind die Objekte grau macht, aber ich hatte gehofft, dass sie weiß zu machen.
Ich glaube, Ihr Problem entsteht durch die Verwendung eines Bildes, das grau ist, anstatt schwarz. Wenn dieses graue Bild invertiert wird, sieht es einfach wie eine hellere Farbe von Grau aus.
Ihr Code funktioniert gut, Sie müssen nur ein dunkleres Bild verwenden, um den gewünschten Effekt zu erzielen. Versuchen Sie Ihr Bild mit diesem Swapping:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Yin_yang.svg/2000px-Yin_yang.svg.png" width="100px" height="100px">
Arbeiten Geige mit verschiedenem Bild: https://jsfiddle.net/9f2cd2df/1/
Was ist die Verwendung von Graustufen (1) dann? –
Für sein Beispielbild, wie auch für mein Beispiel, hat es keinen Sinn, 'Grayscale (1)' zu verwenden. Bei Verwendung eines Farbbildes macht sich der Effekt jedoch bemerkbar. Ich habe gerade gezeigt, dass sein Code tatsächlich funktioniert. – James
Invertieren funktioniert auch für Graustufenbilder –
Ihr Code richtig funktioniert, ich denke, das Problem mit dem Bild selbst
img:hover {
-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);
}<img src="//www.tracto.com.br/wp-content/uploads/2014/05/Icone-circular-Facebook.png" width="250">Ich habe meinen Kommentar als Antwort gegeben, weil meine Vermutung richtig war. Da Ihr Bild ein .png Bild ist, kann es transparente Pixel enthalten. Wie Ihr Beispiel zeigt, scheint Ihr Code nicht zu funktionieren. Wenn ich das Bild schwebe, vermute ich, dass die weißen Elemente Ihres Bildes tatsächlich transparent sind.
Was ich getan habe, ist einfach kopieren Sie Ihr Bild auf MS Farbe und speichern Sie es als .jpg. Da das Format jpg keine transparenten Pixel unterstützt, gibt es keine transparenten Pixel mehr. Das sollte also die Umkehrung überwinden.
Jetzt, wenn Sie Ihren Code ausführen, sehen Sie, dass es einwandfrei funktioniert.
img:hover {
-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);
}<img src="http://oi64.tinypic.com/6tibys.jpg">das einzige, was Sie tun müssen, ist also: öffnen Sie Ihr Bild-Editor, und füllen Sie diese „weißen“ Körper mit weißer Farbe. Die äußeren Teile können transparent bleiben. Das wird das Problem beheben, denke ich.
Wie von James beantwortet, ist Ihr Bild grau.
Sie können das deutlich im folgenden Ausschnitt (die linken Bilder) sehen.
Sie können dieses Problem beheben, um den Kontrast zu erhöhen (siehe die richtigen Bilder)
body {
width: 500px;
background: linear-gradient(black 220px, white 220px, white 440px, tomato 440px);
}
.test {
width: 200px;
height: 200px;
position: relative;
}
.one:hover {
-webkit-filter: invert(1);
}
.two {
-webkit-filter: contrast(500%);
}
.two:hover {
-webkit-filter: invert(1) contrast(500%);
}<img src="http://goproweb.ca/new/img/new/11.png"" class="test one"></div>
<img src="http://goproweb.ca/new/img/new/11.png"" class="test two"></div>
<img src="http://goproweb.ca/new/img/new/11.png"" class="test one"></div>
<img src="http://goproweb.ca/new/img/new/11.png"" class="test two"></div>
<img src="http://goproweb.ca/new/img/new/11.png"" class="test one"></div>
<img src="http://goproweb.ca/new/img/new/11.png"" class="test two"></div>Dies sollte die tatsächliche Antwort sein. Dieser kleine Kontrasttrick ist reines Gold. –
Ich nehme an, dass die Farbe innerhalb des Körpers an diesen zwei weißen Männern (von der schwarzen Linie umrandete) ist nicht weiß, aber transparent. – KarelG