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

实现这一目标的一些可能的解决方案。

A ：使用CSS Blend Modes。 CSS Tricks关于他们的指南非常简明扼要。对于绿色，您只需：

if()

并重复这一点，以供您选择其他颜色。 Example

B ：如果你坚持使用.image-green { background-image: url(image.jpg); background-color: green; background-blend-mode: multiply; }的想法，那么你需要使用filter来实现这一目标。它需要这样的度数值：

filter: hue-rotate

Example fiddle

C ：这更像是一个叠加层，但它适用于灰度图像。您可以设置一个伪元素叠加层，并使用简单的.blue { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); }属性为您想要的任何颜色着色！查看example

background-color

Answer 3

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

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

3 个答案: