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

Как инвертировать цвета изображения (jpg / png..) в любом css, если это возможно, или javascript?

предыдущие вопросы не дают достаточно подробно.

4 54
javascript css colors

4 ответа:

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

img {
   -webkit-filter: invert(1);
   filter: invert(1);
   }
<img src="http://i.imgur.com/1H91A5Y.png">
124

может быть сделано в крупных новых broswers с помощью кода ниже

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

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

10

вы можете применить стиль с помощью JavaScript. Это код Js ниже, который применяет фильтр к изображению с идентификатором theImage.

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

и это 

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

теперь все, что вам нужно сделать, это вызвать invert() мы делаем это при нажатии на изображение.

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>

мы используем это на нашем сайт

2

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

0