Po problemie z odwracaniem czerni do białego PNG

Mam plik PNG i chciałbym odwrócić czarny kolor obiektów na biały po najechaniu myszą.Po problemie z odwracaniem czerni do białego PNG

Próbowałem już jest ten

img:hover { 
 
    -webkit-filter: grayscale(1) invert(1); 
 
    filter: grayscale(1) invert(1); 
 
}

<img src="http://goproweb.ca/new/img/new/11.png">

To sprawia, że obiekty szary, ale miałem nadzieję, aby je do białego.

Źródło

2016-02-10 Behseini

Przypuszczam, że kolor w organizmie w tych 2 białych mężczyzn (przedstawione przez czarną linią) jest nie biały, ale przezroczysty. – KarelG

Uważam, że Twój problem wynika z używania obrazu, który jest szary, a nie czarny. Kiedy ten szary obraz jest odwrócony, wygląda po prostu na jaśniejszy kolor szarości.

Twój kod działa poprawnie, po prostu potrzebujesz ciemniejszego obrazu, aby uzyskać pożądany efekt. Spróbuj zamiana obrazu z tego:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Yin_yang.svg/2000px-Yin_yang.svg.png" width="100px" height="100px">

skrzypce pracy z różnymi obrazu: https://jsfiddle.net/9f2cd2df/1/

Źródło

2016-02-10 20:56:59 James

jaki jest pożytek z 'skali szarości (1) '? –

Dla jego przykładowego obrazu, jak i mojego, nie ma sensu używanie 'skali szarości (1)'. Jednak efekt ten staje się zauważalny podczas używania obrazu kolorowego. Właśnie pokazałem, że jego kod rzeczywiście działa. – James

Odwrócenie będzie działać również dla obrazów w skali szarości. –

Twój kod działa poprawnie, myślę, że problem jest z obrazem samego

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">

Źródło

2016-02-10 21:02:16

Podałem swój komentarz jako odpowiedź, ponieważ moje przypuszczenie było słuszne. Ponieważ obraz jest obrazem .png, może on zawierać przezroczyste piksele. Jak widać na przykładzie, Twój kod nie działa. Po najechaniu myszą zdałem sobie sprawę, że białe elementy twojego zdjęcia są w rzeczywistości przezroczyste.

To, co zrobiłem, to po prostu skopiowanie obrazu do MS Paint i zapisanie go jako .jpg. W związku z tym, ponieważ format jpg nie obsługuje przezroczystych pikseli, nie ma już przezroczystych pikseli. Powinno to przezwyciężyć problem odwrotny.

Teraz, po uruchomieniu kodu, widać, że działa bezbłędnie.

img:hover { 
 
    -webkit-filter: grayscale(1) invert(1); 
 
    filter: grayscale(1) invert(1); 
 
    }

<img src="http://oi64.tinypic.com/6tibys.jpg">

Więc jedyną rzeczą, którą musisz zrobić, to: otwórz edytor zdjęć i wypełnić te „białe” ciała z białym kolorem. Zewnętrzne części mogą pozostać przezroczyste. To naprawi problem, jak sądzę.

Źródło

2016-02-10 21:08:07 KarelG

Jak odpowiedział James, twój wizerunek jest szary.

Widać to wyraźnie w poniższym fragmencie (lewe obrazy).

Można to naprawić zwiększenie kontrastu (patrz odpowiednie zdjęcia)

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>

Źródło

2016-02-10 22:07:29 vals

To powinna być rzeczywista odpowiedź. Ta mała sztuczka kontrastowa to czyste złoto. –

Po problemie z odwracaniem czerni do białego PNG

Odpowiedz

Powiązane problemy