Как размыть 1/ 3 бэграунда?

Question

[olya_097]

и чтобы на той части еще текст был
где размытие

Comments

[Рустам Байназаров]

[olya_097]

Рустам Байназаров, это Вы к чему?

[Рустам Байназаров]

olya_097, а всё к тому же. К вопросу вопросов без нормального описания.

[olya_097]

Рустам Байназаров, обновила

[Рустам Байназаров]

olya_097, если современным путём, то так:



Но поддержка пока только у Safari и самого последнего Chrome. Скоро добавят в Firefox. Всё остальное — визуальным хаком на просчете ширины блока и размера фона + дублирование фона в блок.

[olya_097]

Рустам Байназаров, поняла
жаль что поддержка не очень
спасибо!

[olya_097]

Рустам Байназаров, не пойму правда почему редактор не выделяет как выше

[Рустам Байназаров]

olya_097, потому что это не самое стандартное свойство. Подсветка синтаксиса может с ним не работать.

Answer 1

[Дмитрий]

Попробуйте свойство backdrop-filter

Comments

[olya_097]

Дмитрий, ну да
но слаба поддержка

[Александр]

olya_097, https://jsfiddle.net/xfamk6s9/ (есть свои баги, которые при желании можно легко обойти)

[olya_097]

Александр, спасибо
а что за баги?

[Александр]

olya_097, предлагаю поискать их самостоятельно :)

Answer 2

[RAX7]

Вариант без backdrop-filter

Comments

[olya_097]

RAX7, спасибо

[olya_097]

RAX7, извиня.сь что не по теме

а можно псевдо выровнять нормально?
без top 7px
https://jsfiddle.net/t259xc78/

[RAX7]

olya_097, https://jsfiddle.net/ad46ux7L/ так нормально?

[olya_097]

RAX7, вполне
даже супер спасибо
тоесть абсолют вообще не нужен?

[RAX7]

olya_097, ну если тебе так подходит, то не нужен

[olya_097]

RAX7, главное чтобы было как в макете
у тебя это получилось
спасибо)

[RAX7]

olya_097, кушай с булочкой=)

[olya_097]

RAX7, кстати
насчет backdrop-filter
твой вариант по сути кроосбраузерный?

[RAX7]

olya_097, если считать filter: blur кроссбраузерным
https://caniuse.com/#feat=css-filters

[olya_097]

RAX7, просто у backdrop-filter все гораздо хуже

[RAX7]

olya_097, из двух зол выбирают меньшее. Можно на фон уже размытую картинку подложить, тогда будет работать без всяких фильтров.

[olya_097]

RAX7, ну да
но если захотят изменить картинку то будет не очень)

[Рустам Байназаров]

olya_097, вот этот способ с визуальным хаком, который есть единственный иной вариант, кроме backdrop'a, о котором я говорил.