为图像着色的颜色选择器（HTML、CSS、网络）

Question

我正在尝试找到使用一张图片的好方法，但使用 CSS/HTML 或其他轻量级的东西在图片上应用滤镜或色调。

例如，

理想情况下，我只想在页面上使用 1 张图片，然后根据颜色选择器将透明 filter/image 放在最上面，但还没有完成以前是这样的侧面

谢谢

Answer 1

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

从这里开始使用 css3 个过滤器 --> http://css-tricks.com/almanac/properties/f/filter/

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

Next for your colour picker you would make some sorta javascript that when a specific colour is picked it would change the class of that image.像...

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

或

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

使用类似

的东西

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

希望对您有所帮助

Answer 2

这个解决方案很老套，但它也适用于不支持 CSS3 过滤器的浏览器，例如 Internet Explorer 11 或 Firefox 22。

.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);
}

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

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

为图像着色的颜色选择器（HTML、CSS、网络）

Color picker for tinting image (HTML, CSS, web)

html

css

jquery

colors

picker