如何用css给图像“着色”

Question

我尝试使用背景属性为图像着色，如下所示：

css prettyprint-override">.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

使用：在选择器之前，您可以用不同的颜色对图像进行着色

.image-holder {
  height: 200px;
  width: 200px;
  position:relative; 
}    
.image-holder:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,255,255, 0.5);
  transition: all .3s linear;
}
.image-holder:hover:before { 
  background: none;
}

<div class="image-holder">
    <img src="http://lorempixel.com/200/200" />
</div>

Answer 2

根据您的浏览器支持使用过滤器，您可以使用许多选项。com看起来很有前途http://caniuse.com/#search=css过滤器：-

filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

Answer 3

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

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

你需要根据你的需要来调整它。