Как перекрасить белое изображение на произвольный цвет с помощью CSS?

Question

Как сделать изображение с помощью только белых и прозрачных пикселей (example) и перекрасить, скажем, красным или оранжевым, используя только CSS?

Вопрос ниже был задан ранее -

Change color of PNG image via CSS?

Ответ говорит использовать фильтры, но не указывает на то, что комбинация фильтров будет заставить его работать. Есть ли какие-либо комбинации фильтров, которые позволили бы мне изменить бело-прозрачное изображение на красный?

---

Для уточнения: Я хотел бы перекрасить белую часть изображений, а не цвет фона. Например, я бы хотел, чтобы он был красным на прозрачном.

img { 
 
    -webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg); 
 
    }

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>

Answer 1

Я играл немного и нашел возможное решение только окрасить белые части:

img { 
 
    display: block; 
 
    background: black; 
 
    -webkit-filter: brightness(.5); 
 
} 
 
.recolor { 
 
    position: relative; 
 
    display: inline-block; 
 
    -webkit-filter: brightness(1) contrast(300%) invert(1); 
 
} 
 
.recolor:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 255, 255, 0.3); 
 
}

<figure class="recolor"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png"> 
 
</figure>

Как это работает:

1. Сделать изображение фон черные и установить его яркость в два раз, чтобы сделать передний план серых
2. Создать оболочку элемент (<figure>) и создать наложение (:after) инвертированного цвета вы хотите с относительно низкой непрозрачности
3. Теперь отфильтруйте элемент обертки: сделайте его таким ярким с таким высоким контрастом, что фон станет черным, но цвет переднего плана остается.
4. Теперь просто инвертировать обертку, чтобы цвет переднего плана на белый

Limits: Прозрачность теряется из-за фильтрации цвета может быть не точно цвета, которые вы хотите, browser support не является оптимальным

Answer 2

Просто укажите цвет фона для изображения, Пример ниже.

Используйте это изображение

ПРИМЕЧАНИЕ: Изображение прозрачна

CSS

img{ 
    background-color: red; 
} 

HTML

<img src="test.png"> 

Answer 3

Можно «окрасить» белое изображение с использованием фильтров, но результаты несовершенны.

Первый шаг - это фильтр sepia, а затем hue-rotate.

Истинный «красный» может быть труднее достичь, но вы можете играть с этим дальше.

img { 
 
    max-height: 100vh; 
 
    width: auto; 
 
    -webkit-filter: 
 
    sepia(100%) 
 
    saturate(2000%) 
 
    hue-rotate(222deg); 
 
} 
 
body { 
 
    background: green; 
 
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>