如何用css“着色”图像

Question

我尝试使用这样的背景属性为图像着色：

 .image-holder:hover {
  opacity: 1;
  transition: opacity 1s, background 1s;
  background: #EBEFF7;
}

.image-holder {
  height: 250px;
  width: 200px;
  opacity: 0.5;
  transition: opacity 1s, background 1s;
}

 <div class="image-holder">
  <img src="https://dummyimage.com/200x200/fff/000000.png" />
</div>

http://jsfiddle.net/6ELSF/1047/

但是图像并没有像预期的那样“着色”。

悬停时看起来像这样：

但我希望它看起来像这样：

我试图测试一些我发现的关于图像叠加的解决方案，但在我的示例中都没有。如何以最简单的方式实现这一点？

原文由 Palmi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我使用了一些组合滤镜来为图像完全着色。不可能直接着色（使用滤镜），但你可以将它涂成棕褐色，调整饱和度和亮度，并通过使用色调旋转获得所需的颜色……我认为它是这样的……

 img {
  filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
}

您将需要根据您的需要对其进行调整。

原文由 lxtazz 发布，翻译遵循 CC BY-SA 4.0 许可协议