2

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

2
  • Эм.. Ничего не понял.
    – Qwertiy
    25 фев 2018 в 21:43
  • А.. Всё-таки понял...
    – Qwertiy
    25 фев 2018 в 21:47

2 ответа 2

4

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

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>

1

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

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" />

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.