동적으로 이미지 색상 변경

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>