Используйте CSS3 фильтр, чтобы изменить цвет c - PullRequest
Новая
       40

Используйте CSS3 фильтр, чтобы изменить цвет c

0 голосов
/ 26 апреля 2020

В настоящее время у меня есть .png -изображение, состоящее только из двух цветов: белого (#FFFFFF) и цвета reddi sh (#EA3D05), и я хотел бы изменить цвет этого изображения, используя CSS фильтры. В частности, мне нужно заменить белый цвет на черный (#000000) и оставить красный цвет как есть.

Мой текущий подход заключается в использовании 

filter: invert(100%);

. Этот цвет будет использовать белый пиксель черный, но также влияет на красный цвет. Я думал, что теперь можно было бы изменить (теперь синие пиксели) обратно на красный (#EA3D05), так как остальные пиксели черные. Есть ли способ добиться этого?

1 Ответ

0 голосов
/ 26 апреля 2020

Вы можете рассмотреть использование filter и mix-blend-mode, чтобы приблизить это: 

.box {
  width: 200px;
  height: 200px;
  background: radial-gradient(#EA3D05 50%, #fff 50%);
  border: 1px solid #EA3D05;
}

.wrapper {
  display: inline-block;
  position: relative;
}

.wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* adjust below until you get closer */
  background: #EA3D05;
  mix-blend-mode: hue;
}
<p>Original image</p>
<div class="box"></div>

<p>New image</p>
<div class="wrapper">
  <div class="box" style="filter:invert(100%);"></div>
</div>
...