Как размыть фоновую картинку?
За размытие содержимого элемента, включая картинки, отвечает функция blur(), которая применяется к свойству filter. Эта функция размывает всё на своём пути, поэтому сперва надо изолировать фоновое изображение и уже затем использовать filter. Для этого создадим псевдоэлемент через ::before и к нему добавим фон через background и размытие через filter. При этом псевдоэлемент требуется зафиксировать чтобы он не прокручивался вместе с текстом. Для этого воспользуемся свойством position со значением fixed и здесь же зададим размеры псевдоэлемента через свойства top, left, bottom, right с нулевыми значениями.
Содержимое ::before оказывается выше текста и скрывает его, так что опускаем фон ниже свойством z-index со значением -1. В итоге получится код, показанный в примере 1.
Пример 1. Размытие фона веб-страницы
Результат данного примера показан на рис. 1.
Рис. 1. Размытый фон у веб-страницы
Аналогично добавляется и размывается фон для отдельного блока, например, <section>, но чтобы фон совпадал с размерами блока, для селектора section следует установить относительное позиционирование, а для псевдоэлемента абсолютное (пример 2).
Пример 2. Размытие фона раздела
Результат данного примера показан на рис. 2.
Рис. 2. Размытый фон у блока
См. также
- backdrop-filter
- background
- blur()
- brightness()
- contrast()
- drop-shadow()
- filter
- grayscale()
- hue-rotate()
- invert()
- opacity()
- position
- position в CSS
- relative и absolute
- saturate()
- sepia()
- Абсолютное позиционирование
- Добавление тени
- Использование в вёрстке
- Линейный градиент
- Липкое позиционирование
- Не только текст
- Несколько фоновых картинок
- Нормальное позиционирование
- Относительное позиционирование
- Подробнее о позиционировании
- Поток
- Псевдоэлемент ::before
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Свойства позиционирования
- Спойлер
- Спрайты
- Установка фона и градиента
- Фиксированное позиционирование
- Фильтр
- Фоновая картинка