Как залить пустые места в нестандартном PNG изображении?

Question

[alexeeey_kuznetsov]

Имеется вот такая картинка и как видно она нестандартно обрезана. По макету она немного осветлена наложение полупрозрачного серого bg и затем продолжаются секции серого цвета, которые с bg картиной как бы сливаются, но у меня если поставить серый bg для всех остальных секций, то bg на png картинке, где пустые места будет белым.

Есть какие-то варианты, чтобы эти места пустые на картинке были серыми и сливались с последующими секциями?
UPD:
Не знаю почему не получился до этого вариант с background-color , наверное цвет не тот использовал, не учёл прозрачности белого цвета.
в класс где указано изображение через bg дописал просто background-color: rgba(0, 0, 0, 0.31)

Comments

[Rustam Bainazarov]

Во-первых, не нужно PNG: такая картинка будет весить очень много. Нужно просто вырезать волну в SVG и наложить её поверх блока с фоном.

[Rustam Bainazarov]

Вот так:


У SVG обязателен атрибут preserveAspectRatio="none". Вот пример SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" fill="#fff" preserveAspectRatio="none">
  <path d="M23.94 1.348C33.397-.622 49.458.23 66.287 3.614 87 7.78 100 0 100 0v10H0s13.41-6.458 23.94-8.652z"/>
</svg>

[alexeeey_kuznetsov]

Рустам Байназаров, Про SVG вкурсе, но предоставили, только одну такую картинку, поэтому выходы своеобразные.
Спасибо за такое решение. Такую волну SVG вы в Illustratore создали или есть онлайн сервис, чтобы быстрее сделать не подскажете?

[Rustam Bainazarov]

alexeeey_kuznetsov, Illustrator.

[alexeeey_kuznetsov]

Рустам Байназаров, в примере когда вы добавляли svg в before background - как вы указали такой url?
Т.е. как указать в url можно:
1) Сохранить в папку и уже указывать путь туда(если большой svg)
2) Или напрямую как вы, если svg небольшая. Но если напрямую, то у вас где-то проценты пишутся после значений - это надо перегонять сначала svg в что-то?
UPD: Вопрос глупый конечно, но я в svg не силён, если ответ простой, то буду рад.

[Rustam Bainazarov]

alexeeey_kuznetsov, это закодированное в base64 изображение, ибо мне некуда было заливать его. Можно просто ссылку на картинку, так будет лучше даже.

Проценты после значений в пути — это последствия кодирования в base64.

Answer 1

[Антон Антон]

Вместо белого используйте прозрачный