Как сделать такой размазанный задний фон на css и в photoshop"e чтобы было видно то что за этим фоном?

Question

[Nebrasko]

Как сделать такой размазанный задний фон на css и в photoshop"e чтобы было видно то что за этим фоном ?

Comments

[Дмитрий Грабко]

filter: blur ?

[Nebrasko]

Дмитрий Грабко, спасибо я и не знал что есть такое свойство css, а как в фотошопе такое сделать не подскажете ?

Answer 1

[UX_Sense]

Берешь любую картинку в фотошопе, делаешь ее смарт-объектом и в меню выбираешь Filter > Blur > Gaussian Blur

Answer 2

[xmoonlight]

https://codepen.io/xmoonlight/pen/xypWOW

Comments

[Nebrasko]

то что надо!!!

Answer 3

[азаза]

судя по примеру
обычный фон
а поверх него элементы

Comments

[Nebrasko]

там по бокам затемнения идут...

Answer 4

[Андрей Гончаров]

Прям то, что ты хочешь, есть в только в сафари - backdrop-filter. А если к жизни вернуться, то лучше просто картинкой залей уже заблюренной)) Или filter: blur на нормальную картинку наложи.

Comments

[Nebrasko]

Мне для chromium нужен. А задний фон к сожалению будет меняться так как после загрузки страницы на заднем фоне будет видео. + поверх него нужно сделать blur прозрачный.

[Андрей Гончаров]

Nebrasko, Я не тестировал, но можно к тегу video применить filter:blur. Только надо сделать его чуть больше чем нужно, чтоб смазанные края ушли из поля видимости. По поводу затемнения - отдельным элементом поверх, в нем либо градиент нужный, либо еще как-то тенью может быть. И есть огромные вопросы к производительности блюренного видео)) - я думаю ничего нормального не получится) Гораздо лучше сразу подготовить блюренное видео.

Answer 5

[frees2]

Для этого фотошоп не нужен, если правильно понял, для странички?
1 Надо сжать картинку в jpg, сильно до "квадратиков".
2 dulsky.eu/t/
В старых браузерах не будет работать

Comments

[Nebrasko]

У меня не картинка а видео будет задним фоном картинка только для заглушки пока видео не до загрузится.