如何“着色”？图像与CSS [英] How to "tint" image with css

问题描述

我尝试使用以下背景属性为图像着色：

  .image-holder：hover {opacity：1;过渡：不透明度1s，背景1s；背景：＃EBEFF7;}。image-holder {高度：250px;宽度：200像素；不透明度：0.5;过渡：不透明度1s，背景1s;}  

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

但我想要它看起来像这样：

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

解决方案

取决于您的浏览器支持，使用过滤器，您可以使用许多选择，caniuse.com看起来很有前途 http://caniuse.com/#search=css%20filter ：-

 过滤器：blur（5px）; 
过滤器：亮度（0.4）； 
过滤器：对比度（200％）； 
过滤器：阴影（16px 16px 20px blue）; 
过滤器：灰度（50％）； 
过滤器：hue-rotate（90deg）; 
过滤器：invert（75％）; 
过滤器：opacity（25％）; 
过滤器：饱和（30％）； 
过滤器：棕褐色（60％）； 
  

I try to tint an image with the background attribute like this:

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

But the image is not "tinted" like expected.

On hover it looks like this:

but I want it to look like this:

I tried to test some solution I found regarding overlay of images but neither worked in my example. How do accomplish this in the least complicated manner?

解决方案

Depending on your browser support use filter, many options at your disposal, caniuse.com looks promising 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%);

这篇关于如何“着色”？图像与CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！