Как сделать изображение под прозрачным фоном svg?

Question

[deniskins23]

Доброго времени суток.
Кто может подсказать как реализовать такое
Суть в том, что по сути оба круга(белый и прозрачный, так же как и зеленая часть внизу) я так полагаю лучше делать svg.
Но как сделать чтобы изображение было под "стеклом" прозрачным элемента svg?
Пробовал найти решение, не получилось..В структуре html тоже как-то смутно представляю себе.
Прозрачность то svg можно сделать через fill-opacity но как реализовать в целом..
Кто может подсказать?

Comments

[sim3x]

https://developer.mozilla.org/en-US/docs/Web/CSS/C... ?

[deniskins23]

sim3x, а как это будет работать с svg? суть в том что круги то не изображения, их надо объектами svg рисовать..
Хотя можно и не svg все это реализовать, просто я как-то не представляю себе как..

[sim3x]

deniskins23, свг тоже изображение
https://developer.mozilla.org/en-US/docs/Web/CSS/b...

Как все сделать
ну например картинку с человеком справа поставить в самый низ
А поверх него наложить свг и белый круг слева сверху залить белым

[deniskins23]

попытка была..не удачная..сможете показать на фидле например?

[Максим Тимофеев]

Но как сделать чтобы изображение было под "стеклом" прозрачным элемента svg?

а не проще в фотошопе картинку привести к такому виду? Фильтры имитирующие эффект "под стеклом" сильно кушают ресурсы.

[Moskus]

Максим Тимофеев, правильно пишется "имитирующие". Речь ведь об имитации, а не эмиссии.

[Максим Тимофеев]

Moskus, спс

Answer 1

[RAX7]

Comments

[deniskins23]

Огромное спасибо!!!!!!То, что нужно!

[deniskins23]

Есть вопрос - все так как нужно было бы, но хотелось бы разобраться, вот это как вообще генерируется, чтобы можно было как-то изменить?

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1758'%3E%3Ccircle cx='1650' cy='706' r='997' fill='%233fb9fb' opacity='0.5'/%3E%3Cpath d='M1650,1702c-550.08,0-996-445.92-996-996C654,430.08,766.2,180.38,947.46,0H0V1758H1920v-93A997,997,0,0,1,1650,1702Z' fill='%2393e8b5'/%3E%3Ccircle cx='140.5' cy='1614.5' r='16' fill='none' stroke='%23c8dfff' stroke-width='6'/%3E%3Ccircle cx='1137' cy='1642' r='16' fill='none' stroke='%23c8dfff' stroke-width='6'/%3E%3Ccircle cx='852' cy='1566' r='19' fill='none' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M321,1758s299-36,639-36,639,36,639,36Z' fill='%23fff'/%3E%3C/svg%3E%0A")

[RAX7]

deniskins23,
1. сохрани как SVG файл Как скачать SVG иконки с сайта?
2. отредактируй в иллюстраторе
3. сконвертируй в data-url https://yoksel.github.io/url-encoder/

[deniskins23]

RAX7, Понял. Спасибо.
Только получается, что вы сами нарисовали эти круги и зеленую полосу внизу, а потом уже сохраняли?

[RAX7]

deniskins23, да всё верно, сначала нарисовал, потом сохранил в SVG и сконверировал в data-url.
Советую сделать отдельный арборд с нужными размерами бэкграунда и экспортировать этот арборд целиком
https://css-tricks.com/saving-svg-space-around-ill...

[deniskins23]

RAX7, Понял. Огромное спасибо. Учту.-)Только начал ковырять svg, поэтому пока понятно как делается относительно, но теперь понимания больше.+1 к ауре добра.-)

[RAX7]

deniskins23, пожалуйста =)

Answer 2

[Виталий Киренков]

При чём тут СВГ вообще?!

У вас блок с набором дивов и псевдоэлементов.

Накладываете всё слоями. Начиная снизу:
Фоновая картинка (размытая)
Голубой полупрозрачный круг с огромной тенью, которая делает зелёную область
Белый круг и на этом же уровне мелкие круги и круг, который даёт овал снизу.

всё.

Comments

[deniskins23]

Возможно..Так и пытаюсь сейчас сделать.
Просто это все сделано в AI и как-то мысль сразу пошла в сторону вектора...

[Виталий Киренков]

deniskins23, если ваш дизайнер рисует Веб-дизайн в иллюстраторе, то я вам искренне сочувствую.

[deniskins23]

Виталий Киренков, Спасибо..-)Уже и в иллюстраторе было и в xd и в фигме..Они такие эти дизайнеры!!!-)

Answer 3

[rogiivs]

Требуется ваша профессиональная помощь, ужасные вещи происходят - я не могу увидеть прозрачный круг! Но если я правильно вас понял то могу предложить сделать вот так, вез SVG:

Comments

[deniskins23]

Такое решение пробовалось. Вопрос том, что в нем много недочетов и проблем..Да и как-то не верно это все...Не красиво.-)
Но спасибо за попытку.