如何使用CSS3更改图像的颜色？

Question

我想使用CSS3将图像的颜色从灰色更改为绿色/红色/黄色。 我曾尝试使用以下代码，但无法正常工作。

img {
    -webkit-filter: blue(100%);
    filter: blue(100%);
}

Answer 1

当前CSS filter支持以下过滤器功能，

/* <filter-function> values */
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%);

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

您可能必须尝试使用filter: url()但不确定。

Answer 2

实现此目的的许多可能的解决方案。

答 ：使用CSS混合模式 。 关于CSS技巧，有一个非常简单明了的指南。 对于绿色，您只需执行以下操作：

.image-green {
  background-image: url(image.jpg);
  background-color: green;
  background-blend-mode: multiply;
}

并重复进行其他选择的颜色。 例

B ：如果您固定使用filter的想法，那么您将需要使用filter: hue-rotate来实现。 它需要一个像这样的度值：

.blue {
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}

小提琴的例子

C ：这更多的是叠加层，但是对灰度图像非常有用。 您可以设置一个伪元素叠加层，并使用简单的background-color属性将其着色为所需的任何颜色！ 看看一个例子

.img-wrapper {
  position: relative;
}

.img-wrapper::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(50, 200, 50, 0.4);
}

Answer 3

您可以使用当前添加到现代浏览器中的一项功能来更改图像的颜色，即filter (-web-filter for chrome and safari) 。 但是主要的问题是，正如您在询问有关更改颜色的问题时所说的那样，但我想它只适用于顾名思义的过滤器。 当前所有现代浏览器都支持此功能，因此我们可以即时使用此功能。它可以在许多情况下为您提供帮助，并且可以替代许多ui设计，并且可以通过查看此Codepen链接来更清楚地了解此功能。 https://codepen.io/Deep_Purple/pen/gGXvMR