Ho un file PNG e vorrei invertire il colore nero degli oggetti su Bianco al passaggio del mouse.Problema con inversione PNG nero su bianco
Ho già provato è questo
img:hover {
-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);
}<img src="http://goproweb.ca/new/img/new/11.png">Questo rende gli oggetti grigi, ma speravo di farli al bianco.
Credo che il problema derivi dall'utilizzo di un'immagine grigia, anziché nera. Quando questa immagine grigia è invertita, sembra proprio un colore più chiaro di grigio.
Il codice funziona correttamente, è sufficiente utilizzare un'immagine più scura per ottenere l'effetto desiderato. Provare a sostituire l'immagine con questo:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Yin_yang.svg/2000px-Yin_yang.svg.png" width="100px" height="100px">
violino Lavorare diversa immagine con: https://jsfiddle.net/9f2cd2df/1/
a cosa serve 'grayscale (1)' allora? –
Per la sua immagine di esempio, così come per la mia, non ha senso usare 'grayscale (1)'. Tuttavia, il suo effetto diventa evidente quando si utilizza un'immagine a colori. Stavo solo mostrando che il suo codice funziona davvero. – James
invert funziona anche per le immagini in scala di grigi –
Il codice funziona correttamente, penso che il problema è con l'immagine stessa
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">Ho inserito il mio commento come risposta perché la mia ipotesi era giusta. Poiché l'immagine è un'immagine .png, può contenere pixel trasparenti. Come visto dal tuo esempio, il tuo codice sembra non funzionare. Quando si alza l'immagine, ho intuito che gli elementi bianchi della tua immagine sono effettivamente trasparenti.
Quello che ho fatto è semplicemente copiare l'immagine in MS paint e salvarla come .jpg. Di conseguenza, poiché il formato jpg non supporta i pixel trasparenti, non ci sono più pixel trasparenti. Quindi questo dovrebbe superare il problema invertito.
Ora, quando si esegue il codice, si vede che funziona in modo impeccabile.
img:hover {
-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);
}<img src="http://oi64.tinypic.com/6tibys.jpg">Quindi, l'unica cosa che dovete fare è: aprire l'editor di immagini, e riempire questi corpi "bianchi" con colore bianco. Le parti esterne possono rimanere trasparenti. Ciò risolverà il problema, credo.
Come da James, la tua immagine è grigia.
Lo si può vedere chiaramente nel frammento di seguito (le immagini a sinistra).
È possibile risolvere questo problema aumentando il contrasto (vedere le immagini giuste)
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>Questa dovrebbe essere la risposta effettiva. Quel piccolo trucco di contrasto è oro puro. –
Suppongo che il colore all'interno del corpo a quei 2 maschi bianchi (indicato dalla linea nera) è non bianco, ma trasparente. – KarelG