Html 如何"；“淡色”；带有css的图像

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

。图像保持器：悬停{
不透明度：1；
过渡：不透明度1s，背景1s；
背景:#EBEFF7；
}
.图像支架{
高度：250px；
宽度：200px；
不透明度：0.5；
过渡：不透明度1s，背景1s；
}

---

使用

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


。图像保持器{
高度：200px；
宽度：200px；
位置：相对位置；
}    
.图像持有者：之前{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景：rgba（0255255,0.5）；
过渡：全部3秒线性；
}
.图像持有者：悬停：在{
背景：无；
}
根据您的浏览器支持使用情况，caniuse.com有许多选项供您选择，看起来很有希望：-

更改父容器的不透明度会更改所有子容器。做一个单独的div来控制你的色调。我把一些东西钉在一起，但基本的东西都在那里


。图像保持器{
位置：相对位置；
最大高度：250px；
最大宽度：200px；
}
.图像支架{
显示：块；
不透明度：0.5；
最大宽度：100%；
最大高度：继承；
}
.色调{
位置：绝对位置；
最大高度：250px；
最大宽度：200px；
排名：0；
底部：0；
左：0；
右：0；
保证金：0；
不透明度：0；
背景：#00f；
过渡：不透明度1s；
}
.图像支架：悬停。着色{
不透明度：1；
}
我使用了一些组合滤镜对图像进行完全着色。直接着色是不可能的（使用滤镜），但你可以把它涂成深褐色，调整饱和度和亮度，并通过使用色调旋转得到想要的颜色。。。我想是这样的

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

你需要根据自己的需要调整它。。。希望有帮助

致以最良好的祝愿，
Alex
这不完全是一种真正的色调，但这是我发现在图像上实现颜色层更容易的方法。诀窍是在图像上使用带有rgba颜色的绝对层。它对我的一般情况非常有效。
试一试！
.mycontainer{
位置：相对位置；
宽度：50%；
保证金：自动；
}
.overtint{
位置：绝对位置；
背景色：rgba（255,0,0,0.6）；
宽度：100%；高度：100%；
}
img{宽度：100%；}
a:hover.overtint{
背景色：rgba（0255,0,0.6）；
过渡时间：.5s；
}
您可以使用当前具有的
混合模式来实现这一点。您可以使用与以前相同的标记



但是使用这个css：

div.image-holder{
过渡色：背景色；
宽度：最小含量；
}
div.image-holder：悬停{
背景色：#EBEFF7；
}
img{
显示：块；
/*融入父母的背景：*/
混合模式：倍增；
}

对于本演示，您希望将白色着色到您选择的颜色，因此您希望使用
倍增
混合模式。如果您想给黑色上色，请使用
屏幕
混合模式

“但图像并不像预期的那样“着色”。您希望看到什么？我试图根据我的情况调整您的示例，但它并没有真正起作用。我希望它在悬停时着色…@Palmi在你的小提琴中，你没有在悬停时使用
不透明度
，这就是它重叠图像的原因。@Pete当我再次尝试使用我的颜色时，它是重叠的@Palmi使用背景色和rgba（）同样@palmi您需要使用一些不透明度-或者像前面的小提琴一样使用rgba，或者在此处添加一些
不透明度：0.5
非常详细的解释：。这里有一个来自答案之一的代码笔，它为您提供了需要使用的CSS过滤器，用于任何十六进制值：。
img {
  filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
}