Задать вопрос
@Suleimanov_Ismar

Как закрасить прозрачную область png?

Здравствуйте,

Есть png:
650c1a2d1988e698665524.png

Нужно закрасить текстурной картинкой png где прозрачная область.
650c1a052c238169298643.jpeg

Использую Css Mask, но макса наоборот обходит прозрачные слои.
Думал через Css clip-path получится обойти, но никак не получается, может быть у вас есть подсказки как можно решить данную задачу?

Быть может формат картинок поменять, в виде svg или другие форматы?
Фото обуви это пример, могут быть разные модели, и соответственно разные зоны закраски.

Ожидаемый результат:
650c19eabd50c402929673.png

Пожалуйста подскажите куда копать?
  • Вопрос задан
  • 135 просмотров
Подписаться 1 Сложный 7 комментариев
Решения вопроса 1
@Suleimanov_Ismar Автор вопроса
Проблема решена.
Оказалось все проще, закрашиваем те места где будет все статично, оставляем не закрашенным ту часть, где будем динамично подставлять цвета.
Выходит 2 картинки:
1) Цвет
2) Форма

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

Пример кода html
<div class="pic">
		<img src="color.jpg" class="bg">
		<img src="form.png" class="face">
	</div>


Пример кода Css
.pic img {
    width: 100%;
}

.pic {
    width: 400px;
    position: relative;
    background: white;
}

.pic .face {
    position: absolute;
    left: 0;
    top: 0;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы