mr_garther
@mr_garther
Python Full-Stack

Как поставить png/jpg картинку в качестве фона svg?

Здравствуйте!
Очень-очень нужна помощь от очень-очень экспертов.
Что есть в наличии: дизайн-макет, два рандомных фото из яндекса и никаких идей.
Что требуется: подставить на требуемые места изображения. На место красной и зелёной фигур, см. ниже.
6146381f326d3459812109.png

С зелёной формой вопросов никаких нет -- border-radius на 100% и ок. Но что делать с красной формой? Может как-то использовать маску, svg, что-то ещё? Много перечитал информации, но я либо не там ищу, либо не то. Вариант конвертировать изображение в base64 и сунуть внутрь svg сразу в топку -- слишком накладно хранить изображение целиком в БД (вместо просто ссылки на него), а все изображения будут храниться в ней.
  • Вопрос задан
  • 98 просмотров
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
Для сложной формы да, SVG-маску, для кругляша хватит border-radius-а. Впрочем ничего не мешает сгенерировать SVG прямо в теле HTML. Как вставлять изображения в тело или в качестве фона — смотри спецификацию SVG.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
mr_garther
@mr_garther Автор вопроса
Python Full-Stack
Итак, немного отдохнув и затем вернувшись к разметке и стилям я продолжил шаманить и всё таки, у меня получилось. Спасибо Арсений Матыцин за подтверждение того, что тут должна быть SVG-маска.
Для тех, кто тоже пытался или кому интересно, вот разметка и стили рабочего варианта:
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы