Как заблюрить фон css
Чтобы заблюрить фон с помощью CSS, вы можете использовать свойство backdrop-filter . Это свойство позволяет добавлять размытие к заднему плану элемента, на котором оно применяется.
Например, если вы хотите заблюрить задний фон элемента div , вы можете использовать следующий код:
div backdrop-filter: blur(5px); >
Здесь мы применяем размытие к заднему плану элемента div с помощью свойства backdrop-filter и устанавливаем радиус размытия в 5 пикселей с помощью функции blur() .
Как размыть фоновую картинку?
За размытие содержимого элемента, включая картинки, отвечает функция blur(), которая применяется к свойству filter. Эта функция размывает всё на своём пути, поэтому сперва надо изолировать фоновое изображение и уже затем использовать filter . Для этого создадим псевдоэлемент через ::before и к нему добавим фон через background и размытие через filter . При этом псевдоэлемент требуется зафиксировать чтобы он не прокручивался вместе с текстом. Для этого воспользуемся свойством position со значением fixed и здесь же зададим размеры псевдоэлемента через свойства top , left , bottom , right с нулевыми значениями.
Содержимое ::before оказывается выше текста и скрывает его, так что опускаем фон ниже свойством z-index со значением -1. В итоге получится код, показанный в примере 1.
Пример 1. Размытие фона веб-страницы
Результат данного примера показан на рис. 1.
Рис. 1. Размытый фон у веб-страницы
Пример 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
- Свойства позиционирования
- Спойлер
- Спрайты
- Установка фона и градиента
- Фиксированное позиционирование
- Фильтр
- Фоновая картинка
blur()
Функция CSS blur() применяет размытие по Гауссу к входному изображению. Его результатом является .
Интерактивный пример
Синтаксис
blur(radius)
Параметры
Пример
blur(0) /* Без эффекта */ blur(8px) /* Размытие с радиусом 8px */ blur(1.17rem) /* Размытие с радиусом 1.17rem */
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Размытие 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.