Odwróć kolory obrazu w CSS lub JavaScript

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

Poprzedni pytania powiązane nie zawierają wystarczająco dużo szczegółów.

Author: Community, 2012-11-11
Source

4 answers

CSS3 ma nowy atrybut filtra , który będzie działał tylko w przeglądarkach webkit obsługiwane w przeglądarkach webkit oraz w Firefoksie. Nie ma wsparcia w IE ani w Operze mini: 

img {
   -webkit-filter: invert(1);
   filter: invert(1);
   }
<img src="http://i.imgur.com/1H91A5Y.png">
 124
Author: toxicate20,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-17 21:58:44

Można zrobić w dużych nowych brwi używając poniższego kodu 

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

Jednak, jeśli chcesz, aby działał we wszystkich przeglądarkach, musisz użyć Javascript. Coś w stylu ten gist wykona robotę.

 10
Author: Kareem,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-17 21:42:12

Możesz zastosować styl za pomocą javascript. Jest to poniższy kod Js, który stosuje filtr do obrazu o ID theImage.

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

A to jest 

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

Teraz wszystko co musisz zrobić to wywołać invert () robimy to po kliknięciu obrazu.

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>
Używamy tego na naszej stronie internetowej
 2
Author: Sabba Keynejad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-17 14:40:56

Dla inwersji od 0 do 1 i z powrotem możesz użyć tej biblioteki InvertImages , która zapewnia wsparcie dla IE 10. Testowałem również z IE 11 i powinno działać.

 0
Author: CodeMonkey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-04 09:08:06