Как наложить цвет на PNG картинку, так чтобы цвет обтекал картинку?

Рейтинг: 0Ответов: 1Опубликовано: 13.07.2023

Как же всё таки наложить цвет на PNG картинку, так чтобы цвет обтекал картинку?

Сейчас разберемся!

css
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Все что вам нужно это создать блок с нужным вам цветом наложения через background и поверх него накинуть mask-image: url(<image.png>);

body {
  background: #222;
}

.icon {
  --image: url(https://cdn.jsdelivr.net/gh/devicons/devicon/icons/android/android-original.svg);
  
  /* Цвет наложения */
  background: red;
  
  /* Вставляем картинку */
  mask-image: var(--image);
  -webkit-mask-image: var(--image);
  
  /* Центрируем */
  mask-position: center center;
  -webkit-mask-position: center center;
  
  /* Убираем повторения */
  mask-repeat: no-repeat;
  mask-size: contain;
  
  /* Расстягиваем */
  -webkit-mask-size: contain;
  
  width: 50px;
  height: 50px;
}
<div class="icon"></div>