Html 如何用css“着色”图像

How to "tint" image with css

提问by Palmi

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/

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?

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

回答by Joe Keene

Depending on your browser support use filter, many options at your disposal, caniuse.com looks promising http://caniuse.com/#search=css%20filter:-

根据您的浏览器支持使用filter，您可以使用许多选项，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%);

回答by lxtazz

I used some combined filters for tinting an image completely. Tinting is not possible directly (with filters), but you can paint it sepia, adapt saturation and brightness, and get the desired color by using hue-rotate... I think it was something like this ...

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

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

You will need to adapt it to your needs... Hope that helps.

您将需要使其适应您的需求...希望有所帮助。

Best regards, Alex

最好的问候，亚历克斯

回答by Mukesh Ram

Using :beforeselector you can tint imageswith different colors

使用: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>

回答by Daniel

Changing the opacity of the parent container changes all children. make a separate div to control your tint. I hammered something together, but the essentials are there.

更改父容器的不透明度会更改所有子容器。制作一个单独的 div 来控制你的色调。我拼凑了一些东西，但必需品就在那里。

.image-holder {
  position: relative;
  max-height: 250px;
  max-width: 200px;
}

.image-holder img {
  display: block;
  opacity: 0.5;
  max-width: 100%;
  max-height: inherit;
}

.tint {
  position: absolute;
  max-height: 250px;
  max-width: 200px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  background: #00f;
  transition: opacity 1s;
}

.image-holder:hover .tint {
  opacity: 1;
}

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

回答by gtamborero

It's not exactly a real tint but this is the way I find easier to achieve a color layer over an image. The trick is to use an absolute layer with rgba color over an image. It works perfectly for my general cases. Have a go!

这并不完全是一种真正的色调，但这是我发现更容易在图像上实现颜色层的方式。诀窍是在图像上使用具有 rgba 颜色的绝对图层。它非常适合我的一般情况。试试吧！

.mycontainer{
  position:relative;
  width:50%;
  margin:auto;
}

.overtint {
  position:absolute;
  background-color: rgba(255,0,0,0.6);
  width:100%; height:100%;
}

img{ width:100%;}

a:hover .overtint { 
  background-color: rgba(0,255,0,0.6); 
  transition-duration: .5s;
}

<div class="mycontainer">
  <a href="#">
    <div class="overtint"></div>
    <img src="https://via.placeholder.com/300x150">
  </a>
</div>

回答by kaleidawave

You can achieve this using mix-blend-modewhich currently has ~88% support. You can use the same markup as before.

您可以使用mix-blend-mode目前有~88% support 的方法来实现这一点。您可以使用与以前相同的标记。

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

But use this css:

但是使用这个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;
}

For this demo you are wanting to tint whites towards your chosen color so you want to use the multiplyblend mode. If you are wanting to tint blacks then use the screenblend mode.

对于此演示，您希望将白色调成您选择的颜色，以便使用multiply混合模式。如果您想为黑色着色，请使用screen混合模式。

Codepen Demo

代码笔演示