html - 如何使用CSS将图像设为 "tint"

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/

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

悬停时看起来像这样:

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

我尝试测试我发现的一些关于图像叠加的解决方案，但在我的示例中均无效。如何以最简单的方式完成此任务？

Answer 1

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

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

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