如何仅使用 CSS3 更改图像颜色（图像具有灰色阴影）？答案

【问题标题】：How to change image's color using only CSS3 (image has shades of Grey)?如何仅使用 CSS3 更改图像颜色（图像具有灰色阴影）？
【发布时间】：2017-07-09 19:56:31
【问题描述】：

如果您能帮助我仅使用 CSS3 更改图像的颜色（图像具有灰色阴影），我将不胜感激。

使用 CSS3 的一些属性，如过滤器......提前谢谢你！

【问题讨论】：

欢迎来到 Stack Overflow。请阅读[如何提出问题](stackoverflow.com/help/how-to-ask) 并提供minimal reproducible examples。
How to make image change color while mouse is moving over?的可能重复

标签： image css filter colors

【解决方案1】：

您可以通过在图像顶部覆盖一个伪元素并使用mix-blend-mode 属性来实现这一点（检查browser support）。对于下面的示例，我使用了overlay。

*{box-sizing:border-box;margin:0;padding:0;}
figure{
    display:inline-block;
    position:relative;
}
img{
    vertical-align:middle;
}
figure::after{
    background:#f00;
    bottom:0;
    content:"";
    left:0;
    mix-blend-mode:overlay;
    opacity:.75;
    pointer-events:none;
    position:absolute;
    right:0;
    top:0;
}

<figure>
    <img alt="" height="250" src="https://unsplash.it/500/250?image=1082&gravity=south" width="500">
</figure>

【讨论】：

不客气。如果此答案或其他答案之一使您满意地解决了您的问题，您可以考虑接受它。
好答案！需要注意的是 mix-blend-mode: color;给出相同方向的另一种选择，以及相反方向的亮度（图像下方的颜色）。

【解决方案2】：

据我所知，您无法将原始灰色图像变成彩色图像。最接近的方法是使用sepia，但这不会像你想要的那样工作。

这个想法是首先使用彩色图像，使用grayscale(100%) 或saturate(0%) 将其设置为灰色，然后（可能在事件中，例如：悬停、单击、聚焦等）使用其中一个过滤器属性再次对其进行着色

见下面的例子

img {
filter:grayscale(100%);
height:200px;
width:auto;
}
img:hover {
filter:hue-rotate(100deg);
}

&lt;img src="https://placeimg.com/640/480/animals"&gt;

如果有帮助请告诉我

【讨论】：

首先感谢您的回访！为了更清楚，我的原始图像是灰色的，我想使用 CSS3 只用一种颜色（红色或绿色或橙色）着色

【解决方案3】：

You can user filter css3,
.filter-me {
  filter: <filter-function> [<filter-function>]* | none
}
Where is one of:
    blur()
    brightness()
    contrast()
    drop-shadow()
    grayscale()
    hue-rotate()
    invert()
    opacity()
    saturate()
    sepia()
    url() - for applying SVG filters
    custom() - "coming soon"

【讨论】：

首先感谢您的回复！我已经尝试了其中的一些功能，但我没有得到正确的结果......否则你能告诉我每个功能的正确值，以便将黑色图像转换为红色图像吗？