Odwracanie kolorów obrazu w CSS lub JavaScript

Question

Jak mogę odwrócić kolory obrazu (jpg/png ..) w obu css, jeśli to możliwe, lub javascript?

Previousrelated pytania nie dają wystarczająco dużo szczegółów.

Answer 1

CSS3 ma nowy atrybut filtru , który działa tylko w przeglądarkach Webkitsupported w przeglądarkach Webkit oraz w Firefoksie. To nie ma poparcia w IE lub Opera Mini:

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

<img src="http://i.imgur.com/1H91A5Y.png">

Answer 2

można zrobić w dużych nowych broswers przy użyciu kodu poniżej

.img { 
    -webkit-filter:invert(100%); 
    filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); 
} 

Jednakże, jeśli chcesz go do pracy we wszystkich przeglądarkach musisz używać Javascript. Coś takiego jak this gist wykona zadanie.

Answer 3

Do inwersji od 0 do 1 iz powrotem można użyć tej biblioteki InvertImages, która zapewnia obsługę IE 10. Testowałem również z IE 11 i powinno działać.

Answer 4

Możesz zastosować styl poprzez javascript. Kod Js poniżej.

function invert(){ 
document.getElementById("theImage").style.filter="invert(100%)"; 
} 

I to jest html

<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png"></img> 

Teraz wszystko co musisz zrobić, to inwertowany wezwanie()

function invert(){ 
 
document.getElementById("theImage").style.filter="invert(100%)"; 
 
}

<h4> Click image to invert </h4> 
 

 
<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png" onClick="invert()" ></img>