如何使用滤镜转换图像

Question

我有一个简单的图像，其中包含透明和红色

我想使用css3中的过滤器将此颜色更改为黄色

这是我到目前为止所拥有的

HTML

 <img src="https://i.stack.imgur.com/3iaXi.png" class="image">

这是CSS

.image {
    filter: saturate(3); 
}

我尝试使用其他选项无法解决问题。

我需要更改什么以获得黄色？

Answer 1

我认为您正在寻找的是hue-rotate CSS过滤器，并结合了brightness CSS过滤器。对于您的图片，请将其变成黄色，使用：

HTML

<img src="https://i.stack.imgur.com/3iaXi.png" class="image">

CSS

.image {
    filter: hue-rotate(60deg) brightness(180%);
}

使用空格分隔多个CSS过滤器。

https://codepen.io/mikeabeln_nwea/pen/wRvBxa

Answer 2

您可以使用sepia过滤器

.sepia-filter {
  -webkit-filter: sepia(1);
  filter: sepia(1);
}

<img src="https://placehold.it/200x200" class="sepia-filter">
<img src="https://placehold.it/200x200" >

Answer 3

我终于找到了。这是黄色的：）

.image {
  filter:sepia(12) saturate(8) brightness(2);
}

<img src="https://i.stack.imgur.com/3iaXi.png" class="image">