Как конвертировать изображение с помощью фильтра

Question

У меня есть простое изображение, которое содержит прозрачный и красный цвет

Я хочу изменить этот цвет на желтый, используя фильтр в css3

Вот что у меня есть

HTML

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

Вот css

.image {
    filter: saturate(3); 
}

Я пытался играть с другим вариантом, но не смог решить проблему.

Что мне нужно изменить, чтобы получитьжелтый цвет?

Answer 1

Я думаю, что вам нужен CSS-фильтр hue-rotate в сочетании с CSS-фильтром brightness.Для изображения, чтобы превратить его в желтый, используйте:

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

я наконец нашел.это желтый :) 1001

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

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

Answer 3

Вы можете использовать фильтр 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" >