Siyah Beyaz PNG'yi Ters Çevirme Konusunda Sorun Var

Question

Bir PNG dosyasına sahibim ve vurgunun üzerine siyah nesnelerin siyah rengini tersine çevirmek istiyorum. Zaten denedim

Bu nesneler gri yapar bu

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

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

, ama beyaza bunları yapmak umuyordum.

Answer 1

Sorununuzun, siyah yerine gri olan bir görüntüyü kullanmaktan kaynaklandığına inanıyorum. Bu gri görüntü tersine çevrildiğinde, daha açık bir gri renge benziyor.

Kodunuz düzgün çalışıyor, istediğiniz efekti elde etmek için sadece daha koyu bir resim kullanmanız gerekiyor. Bu konudaki imajını değiştirmeyi deneyin:

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

Çalışma keman farklı görüntü ile: Sizin kodu düzgün şekilde çalışıyor https://jsfiddle.net/9f2cd2df/1/

Answer 2

, ben sorun görüntünün kendisi

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

ile olduğunu düşünüyorum

Answer 3

Yorumumu cevap olarak verdim çünkü tahminim haklıydı. Resminiz .png görüntü olduğundan, saydam pikseller içerebilir. Örneğiniz tarafından görüldüğü gibi, kodunuz çalışmıyor. Görüntünün üzerine geldiğinde, görüntünün beyaz öğelerinin aslında saydam olduğunu tahmin ettim.

Yaptığım şey sadece resminizi MS boyasına kopyalayıp .jpg olarak kaydetmektir. Bunun sonucu olarak, jpg biçimi saydam pikselleri desteklemediğinden, artık saydam piksel yoktur. Yani bu tersine çevirme sorununun üstesinden gelmelidir.

Şimdi kodunuzu çalıştırdığınızda, kusursuz çalıştığını görürsünüz.

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

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

Yani, yapmanız gereken tek şey şudur: resim düzenleyici açın ve beyaz renk ile bu "beyaz" organları doldurun. Dış parçalar şeffaf kalabilir. Bu, sanırım sorunu çözecek.

Answer 4

James tarafından yanıtlandığı gibi, görüntünüz gridir.

Aşağıdaki parçacıklarda bunu açıkça görebilirsiniz (soldaki görüntüler).

Bu ben (siyah çizgi ile belirtilen) bu 2 beyaz erkekler de vücut içinde renk olduğunu varsayalım

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>