Как размыть фоновую картинку?

За размытие содержимого элемента, включая картинки, отвечает функция blur(), которая применяется к свойству filter. Эта функция размывает всё на своём пути, поэтому сперва надо изолировать фоновое изображение и уже затем использовать filter. Для этого создадим псевдоэлемент через ::before и к нему добавим фон через background и размытие через filter. При этом псевдоэлемент требуется зафиксировать чтобы он не прокручивался вместе с текстом. Для этого воспользуемся свойством position со значением fixed и здесь же зададим размеры псевдоэлемента через свойства top, left, bottom, right с нулевыми значениями.

Содержимое ::before оказывается выше текста и скрывает его, так что опускаем фон ниже свойством z-index со значением -1. В итоге получится код, показанный в примере 1.

Пример 1. Размытие фона веб-страницы

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Размытие фона</title> <style> body::before { content: ''; position: fixed; /* Фиксируем на одном месте */ left: 0; right: 0; /* Вся ширин */ top: 0; bottom: 0; /* Вся высота */ z-index: -1; /* Фон ниже текста */ /* Параметры фона */ background: url(/example/image/aquaria.jpg) center / cover no-repeat; filter: blur(5px); /* Размытие */ } body { color: #fff; /* Цвет текста */ } </style> </head> <body> <p>Суспензия, если рассматривать процессы в рамках специальной теории относительности, отражает электронный кварк.</p> </body> </html>

Результат данного примера показан на рис. 1.

Размытый фон

Рис. 1. Размытый фон у веб-страницы

Аналогично добавляется и размывается фон для отдельного блока, например, <section>, но чтобы фон совпадал с размерами блока, для селектора section следует установить относительное позиционирование, а для псевдоэлемента абсолютное (пример 2).

Пример 2. Размытие фона раздела

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Размытие фона</title> <style> section { color: #fff; /* Цвет текста */ padding: 1rem; /* Поля вокруг текста */ position: relative; /* Относительное позиционирование */ } section::before { content: '; position: absolute; /* Абсолютное позиционирование */ left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background: url(/example/image/aquaria.jpg) center / cover no-repeat; filter: blur(5px); } </style> </head> <body> <section>Суспензия, если рассматривать процессы в рамках специальной теории относительности, отражает электронный кварк.</section> </body> </html>

Результат данного примера показан на рис. 2.

Размытый фон у блока