web-dev-qa-db-ja.com

CSSまたはJavaScriptで画像の色を反転する

可能であればcssまたはjavascriptで画像（jpg/png ..）の色を反転するにはどうすればよいですか？

前関連 質問では十分な詳細が得られません。

javascriptcsscolors
58
laggingreflex

CSS3には新しいフィルター属性があります webkitブラウザでのみ機能します サポート WebkitブラウザーおよびFirefox。 IEまたはOpera miniではサポートされていません。

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

以下のコードを使用して、主要な新しいブラウザーで実行できます

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

ただし、すべてのブラウザーで機能させるには、Javascriptを使用する必要があります。 this Gist のようなものが仕事をします。

11
Kareem

JavaScriptを使用してスタイルを適用できます。これは、theImageというIDの画像にフィルターを適用する以下のJsコードです。

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>

これを website で使用します

2
Sabba Keynejad

0から1への反転およびその逆の場合、このライブラリ InvertImages を使用できます。これは、IE 10のサポートを提供します。IE 11でもテストしました。作業。

0
CodeMonkey