Как размыть задний фон css

Размытие background

Хочу, чтобы фон страницы был размыт. Картинка задана как background-img. Как я понял, фильтры(filter css) можно накладывать только на картинки. ps. Не нашел нужного вопроса т.к. везде спрашивали про img тег.

Отслеживать
10.5k 7 7 золотых знаков 25 25 серебряных знаков 41 41 бронзовый знак
задан 7 сен 2017 в 8:44
EpicLegend EpicLegend
55 1 1 золотой знак 1 1 серебряный знак 6 6 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Если применить blur к body , то размыто будет все содержимое страницы.

Чтобы этого избежать, можно вынести background в новый div с position:absolute , а весь остальной контент обернуть в другой div с position:relative и z-index выше, чем у блока с фоном:

.content < position: relative; z-index: 2; color: #fff; >.bg < position: absolute; z-index: 1; left: -10px; top: -10px; right: -10px; bottom: -10px; filter: blur(5px); background: url(http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/tropical_beach_paradise_5k_17484.jpg) no-repeat center; background-size: cover; >

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 

Как заблюрить фон css

Чтобы заблюрить фон с помощью CSS, вы можете использовать свойство backdrop-filter . Это свойство позволяет добавлять размытие к заднему плану элемента, на котором оно применяется.

Например, если вы хотите заблюрить задний фон элемента div , вы можете использовать следующий код:

div  backdrop-filter: blur(5px); > 

Здесь мы применяем размытие к заднему плану элемента div с помощью свойства backdrop-filter и устанавливаем радиус размытия в 5 пикселей с помощью функции blur() .

Как сделать размытие фона в CSS с помощью одной строки кода

От автора: фоновые размытые изображения — это круто. Это неоспоримый факт. В каждом пользовательском интерфейсе должно быть не менее десяти фоновых размытых изображений (желательно наложенных друг на друга), и каждый интерфейс, созданный с самого зарождения всемирной паутины, который не содержит фоновых размытых изображений, должен быть переработан в первую очередь. Это правда. Разработчики любят, когда вы показываете им дизайн с размытым фоном. А это ложь.

Потому что размытия фона практически невозможно реализовать в веб-приложениях, поэтому дизайнеры чувствуют себя разочарованными, обманутыми и совершенно бесполезными. Но сегодня все меняется. Ну, на самом деле это изменилось еще в 2018 году или что-то около того, это только я что нашел страницу MDN, но вы поняли суть.

Итак, вот как создать размытие фона с помощью свойства CSS backdrop-filter.

Размытие фона в popup в Тильде

Для того, чтобы размыть фон под всплывающими формами в Тильде, вам необходимо добавить в HTML блок T123 в подвал сайта (для того, чтобы код отображался на всех страницах сайта):

.t-popup.t-popup_show
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
>