Размытые фоны для сайта

Содержание

1 2 ответа 2
2 Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css html5 css3 или задайте свой вопрос.

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

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

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

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

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

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

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

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

Привет, друзья. Предлагаю Вам взглянуть на крутую подборку самых различных и конечно же очень качественных размытых фонов для использования на сайтах. Так же их можно использовать и для других целей. Это довольно не маленькая подборка фонов, я уверен, что тут Вы точно сможете найти то, что нужно, к тому же за бесплатно. Я надеюсь, что эта подборка окажется для Вас очень полезной.

Как можно размыть background ?

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

ps. Не нашел нужного вопроса т.к. везде спрашивали про img тег.

2 ответа 2

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

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