用于着色图像的颜色选择器（HTML，CSS，Web）

Question

我正在尝试找到一个使用一个图像的好解决方案，但使用CSS / HTML或轻量级的东西在图像上应用滤镜或色调。

例如，

理想情况下，我只想在页面上使用1张图片，然后根据颜色选择器将一个透明的滤镜/图像放在顶部，但是没有像这样将它放到一边之前。

由于

Answer 1

我不会为你编写代码，而是指向正确的方向。

从css3过滤器开始 - ＆gt; http://css-tricks.com/almanac/properties/f/filter/

这将向您展示如何将滤镜应用于图像并根据需要更改颜色。

接下来对于你的颜色选择器，你会做一些分类javascript，当选择一个特定的颜色时，它会改变该图像的类。有点像...

document.getElementById("MyElement").className = "MyClass";

或

document.getElementById(id).style.property=new style

使用类似

的内容

 <button onclick="yourColourPickerFunction()">Click me</button> 

希望这有帮助

Answer 2

这个解决方案非常hacky，但它也适用于不支持Internet Explorer 11或Firefox 22等CSS3过滤器的浏览器。

＆＃13;

＆＃13;

.outer {
  width: 150px;
  height: 100px;
  background: url("http://stocksnap.io/img-thumbs/960w/5QWUZ3XYGE.jpg");
  background-size: 100%;
}
#inner1 {
  width: 150px;
  height: 100px;
  background: rgba(180,0,0,0.4);
}
#inner2 {
  width: 150px;
  height: 100px;
  background: rgba(0,0,180,0.4);
}

＆＃13;

<div class="outer">
  <div id="inner1">
  </div>
</div>

<div class="outer">
  <div id="inner2">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;