动态更改图片颜色

-3

我有一个.png或.jpeg图像。根据选择的主题，我想更改图像的颜色（以前可能是白色，我想将其更改为红色）。我怎样才能做到这一点。动态更改图片颜色

2016-12-22 Saroj Jena

为什么你需要为这个图像（你就不能使用CSS）？否则，看看CSS滤镜，你可能可以调整图像的色调，但我怀疑这不是你想要的。 – series0ne

在这种情况下，你需要改变图像本身的主题 –

实际上，我们正在使用我们的网站材料设计，所以在同一图像，我们想要不同的情况下不同的颜色（如悬停，点击，点击等） –

你可以尝试这样的：

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

你有不同的度值进行试验，它会从图像到图像的理想后什么不同，所以不会，但它是亲如你会得到与HTML/CSS/jQuery。

来源

2016-12-22 09:26:02 Eamonn

过滤器属性实际上做了什么。 –

它应用了一个过滤器，有一大堆不同的过滤器，但是这个过滤器特别是编辑色调。有关详细信息，请参阅：https：//developer.mozilla.org/en/docs/Web/CSS/filter – Eamonn

色调偏移不会**会改变已灰度图像的颜色。 – Eamonn

您可以通过

做它的形象
变化的顶部添加<div>标记它的不透明度为0.5或更低
改变它的使用上点击

JS颜色

我在下面添加了一个片段。

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>

来源

2016-12-22 09:39:06

动态更改图片颜色

回答

相关问题