画像の色を動的に変更します

Question

私は.pngまたは.jpeg画像を持っています。選択したテーマに応じて、イメージの色を変更したい（以前は白だったかもしれませんが、赤に変更します）。これどうやってするの。あなたが異なる度の値を試してみる必要があるでしょうし、それは理想的にどのようなあなたの後の画像を画像ごとに異なり、そうではないでしょう

img#theImage { 
     filter: hue-rotate(90deg); 
} 

が、それは限り近います：

Answer 1

あなたのような何かを試すことができますあなたはhtml/css/jqueryを取得します。

Answer 2

あなたはそれがクリック のJSを使用してカラーです0.5以下

変化に対する不透明だ画像

変更の上に<div>タグを追加

• でそれを行うことができます

  下記のスニペットを追加しました。

  document.getElementById("green").addEventListener("click",function(){ 
   
  document.getElementById("canvas").style.backgroundColor = "green"; 
   
  }); 
   
  document.getElementById("red").addEventListener("click",function(){ 
   
  document.getElementById("canvas").style.backgroundColor = "red"; 
   
  }); 
   
  document.getElementById("blue").addEventListener("click",function(){ 
   
  document.getElementById("canvas").style.backgroundColor = "blue"; 
   
  });

  img{ 
   
      width:200px; 
   
      height:200px; 
   
      z-index:900; 
   
      } 
   
  #canvas{ 
   
      width:200px; 
   
      height:200px; 
   
      opacity:0.3; 
   
      z-index:999; 
   
      position:absolute; 
   
      } 
   
  button{ 
   
      float:right; 
   
      /*margin-top:200px;*/ 
   
      margin-right:10px; 
   
      }

  <div id="canvas"></div> 
   
  <img src="https://i.stack.imgur.com/wwy2w.jpg" id="image"> 
   
  
   
  <button id="green">green</button> 
   
  <button id="red">red</button> 
   
  <button id="blue">blue</button>