Инвертировать цвета изображения в CSS или JavaScript

Ответ 1

В CSS3 есть новый атрибут фильтра , который будет работать только в браузерах webkit в браузерах webkit и в Firefox. У него нет поддержки в IE или Opera mini:

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

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

Ответ 2

Может быть сделано в крупных новых браузерах, используя код ниже

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

Однако, если вы хотите, чтобы он работал во всех браузерах, вам нужно использовать Javascript. Что-то вроде this gist выполнит эту работу.

Ответ 3

Для инверсии от 0 до 1 и обратно вы можете использовать эту библиотеку InvertImages, которая обеспечивает поддержку IE 10. Я также тестировал IE 11, и он должен работать.

Ответ 4

Вы можете применить стиль через javascript. Js ниже.

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

И это html

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

Теперь все, что вам нужно сделать, это call oververt()

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>