动态更改图像颜色[关闭]答案

【问题标题】：Change image color dynamically [closed]动态更改图像颜色[关闭]
【发布时间】：2016-12-29 18:41:05
【问题描述】：

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

【问题讨论】：

为什么你需要一张图片来做这个（你不能只使用 CSS）？如果做不到这一点，请查看 CSS 过滤器，您可以在其中调整图像的色调，但我怀疑这不是您想要的。
在这种情况下，您需要根据主题更改图像本身
实际上我们在我们的网站中使用了材料设计，所以我们希望在不同的场景（如悬停、点击、点击等）上使用不同的颜色。
@SarojJena 我在下面添加了一个答案，如果有用别忘了打勾

标签： javascript jquery html css

【解决方案1】：

你可以这样做

在图片顶部添加<div>标签
将其不透明度更改为 0.5 或更低
点击时使用js改变颜色

我在下面添加了一个 sn-p。

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>

【讨论】：

【解决方案2】：

你可以试试这样的：

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

您必须尝试使用不同的 deg 值，并且它会因图像而异，因此不是理想的结果，但它与使用 html/css/jquery 获得的结果一样接近。

【讨论】：

过滤器属性实际上是做什么的。
它应用了一个过滤器，有一大堆不同的过滤器，但这个特别编辑色调。查看更多信息：developer.mozilla.org/en/docs/Web/CSS/filter
色相偏移不会改变已经是灰度图像的颜色。