Question

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

Answer 1

您可以尝试以下内容：

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

你必须尝试不同的度数值，并且它会因图像而异，所以理想情况下不是你想要的，但是它和你一样接近用html / css / jquery。

Answer 2

你可以通过

来做到

在图片顶部添加<div>标记
将其不透明度更改为.5或更低
点击

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

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 个答案: