如何用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/

但是图像并没有像预期的那样"着色".

在悬停时它看起来像这样:

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

我试图测试一些我发现的关于图像叠加的解决方案但是在我的例子中都没有.如何以最简单的方式实现这一目标？

Answer 1

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

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 2

我使用了一些组合滤镜来完全着色图像.着色是不可能直接(使用滤镜),但你可以画它棕褐色,适应饱和度和亮度,并通过使用色调旋转获得所需的颜色......我认为它是这样的......

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

你需要根据自己的需要进行调整......希望有所帮助.

最好的问候,Alex

Answer 3

使用:before选择器可以为不同颜色的图像着色

.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 4

您可以使用mix-blend-mode目前拥有约 88% 支持率的工具来实现此目的。您可以使用与以前相同的标记。

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

但是使用这个CSS：

div.image-holder {
  transition: background-color .2s;
  width: min-content;
}

div.image-holder:hover {
  background-color: #EBEFF7;
}

img {
  display: block;
  /* Blend with parents background: */
  mix-blend-mode: multiply;
}

对于此演示，您想要将白色着色为您选择的颜色，因此您想要使用multiply混合模式。如果您想给黑色着色，请使用screen混合模式。

Codepen 演示