Сменить цвет (RGB) белой картинки через CSS

222
27 февраля 2018, 04:04

Есть белая картинка https://i.stack.imgur.com/r5hxV.png Есть цвет в RGB, например (255, 30, 50) Как через CSS фильтры сделать картинку именно такого цвета?

Answer 1

Поддержка браузерами не впечетляет, но ничего лучше не придумал:

html { 
  height: 100%; 
  overflow: hidden; 
  background: linear-gradient(to right, silver, blue); 
} 
 
div { 
  width: 128px; 
  height: 128px; 
  background: url(//i.stack.imgur.com/M9Ipk.png) rgb(255, 30, 50); 
  float: left; 
  margin-right: 8px; 
} 
 
.colored { 
  background-blend-mode: color-burn; 
  -webkit-mask: url(//i.stack.imgur.com/M9Ipk.png); 
  mask: url(//i.stack.imgur.com/M9Ipk.png); 
}
<div></div> 
<div class="colored"></div>

Answer 2

Это не прямой ответ, это всего то вариант....

filter-ом максимум ближе к желаемому можешь так обвести rgb(255, 30, 50) данным цветом. Жаль у filter inset отсутствует, можно было бы закрасить внутрь....

body { 
  width: 100%; 
  height: 100%; 
} 
 
img { 
  width: 100%; 
  height: 100%; 
  filter: drop-shadow(5px 5px 5px rgb(255, 30, 50)); 
}
<img src="https://i.stack.imgur.com/r5hxV.png" />

READ ALSO
Привязка блока с помощью &ldquo;float&rdquo; - &ldquo;ломает&rdquo; код

Привязка блока с помощью “float” - “ломает” код

Здравствуйте, проблема с позиционированием блокаВ блоке находятся 2 дочерних блока, один из которых должен находится слева, другой справа

202
Как сделать полоску на элементе меню, как у гугла и icons8

Как сделать полоску на элементе меню, как у гугла и icons8

Как сделать полоску на элементе меню такую же, как на картинках?

198
Как удалить css

Как удалить css

Как удалить css у одного объекта, если выставлены глобальные настройки вcss

186