Как сделать размытие фона css
Перейти к содержимому

Как сделать размытие фона css

  • автор:

Как сделать размытие фона css

Если вы нажмете кнопку «Сохранить», ваш код будет сохранен и вы получите URL, с который вы можете поделиться с другими.

Нажав кнопку «Сохранить», вы соглашаетесь с нашим правила и условия.

Все коды в общих файлах предоставляется пользователями и принадлежат объявлениям.

Все общие файлы становятся общедоступными. Лицензия не применяется.

Любой код может быть удален без предупреждения (если он считается оскорбительным, поврежденным или по любая другая причина).

schoolsw3.com не несет ответственности за любые утраты или повреждения любого рода во время использования предоставленного кода.

Не удалось сохранить код

В коде слишком много символов.

Ваш код был сохранен

Файл был сохранен в:

Сохранить на Google диске

Если у вас есть аккаунт Google, вы можете сохранить этот код на Google диске.

Google попросит вас подтвердить доступ к Google диску.

Сохранить файл на Google диск

Сохранить файл как: Сохранить файл

Открыть файл из Google диска

Если вы сохранили файл на Google диске, вы можете открыть его здесь:

Открыть файл с Google диска

Открыть файл

Размытие фона

Утилиты для применения фильтров размытия фона к элементу.

Используйте утилиты backdrop-blur- для управления размытием фона элемента.

div class="backdrop-blur-sm bg-white/30 . "> div> div class="backdrop-blur-md bg-white/30 . "> div> div class="backdrop-blur-xl bg-white/30 . "> div>

Чтобы удалить сразу все фоновые фильтры для элемента, используйте утилиту backdrop-filter-none :

div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"> div> 

Это может быть полезно, когда вы хотите условно удалить фоновые фильтры, например, при наведении или в определенной контрольной точке.

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : backdrop-blur-lg , чтобы применять утилиту backdrop-blur-lg только при hover .

div class="backdrop-blur-sm hover:backdrop-blur-lg"> div> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: backdrop-blur-lg , чтобы применить утилиту backdrop-blur-lg только на экранах среднего размера и выше.

div class="backdrop-blur-sm md:backdrop-blur-lg"> div> 

По умолчанию Tailwind включает в себя несколько утилит общего назначения backdrop-blur . Вы можете настроить эти значения, отредактировав theme.backdropBlur или theme.extend.backdropBlur в вашем файле tailwind.config.js .

tailwind.config.js

module.exports =   theme:   extend:   backdropBlur:   xs: '2px',  >  >  >  > 

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

Если вам нужно использовать одноразовое backdrop-blur value , которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.

div class="backdrop-blur-[2px]"> div> 

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

Copyright © 2023 Tailwind Labs Inc.

Кроссбраузерное размытие фона CSS

По своему действию blur CSS очень похож на фильтр « Размытие по Гауссу ». Теперь мы можем достичь такого же эффекта на веб-страницах.

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

Обновлено: 2021-07-14 19:23:17 ВЛ Виктория Лебедева автор материала

Обратите внимание на IE 9 +

Когда в Microsoft решили довести Internet Explorer до современных веб-стандартов, это привело к потере многих собственных CSS значений , включая фильтры DX , которые поддерживались в этом браузере, начиная с IE 5.5 . К сожалению, их нельзя было заменить альтернативными из CSS3 , что поставило IE9 , 10 и 11 в безвыходное положение. На момент написания этой статьи разработчики, которым нужны изображения с точно таким же эффектов размытием, используют в качестве кроссбраузерного решения скрипт StackBlur , работающий на основе canvas .

Текст на размытом фоне

Текст на размытом фоне

Для создания такого эффекта требуется наложить один блок, где используется фильтр на другой с таким же фоновым изображением.

Для этого нужно учитывать, чтобы оба фона совпали. В примере они расположены по центру, без масштаба.

Пример:

Текст на размытом фоне

HTML:

Текст на размытом фоне

CSS:

height : 400px ;
width : 100% ;
display : flex ;
justify-content : center ;
align-items : center ;
background : url ( «background.jpg» ) center no-repeat ;
.glass span < position : relative ; text-align : center ; color : #FFF ; font-size : 36px ; line-height : 40px ; padding : 40px 0 ; box-shadow : 0 6px 18px rgba ( 0,0,0,0.2 ) , 0 16px 28px rgba ( 0,0,0,0.2 ) ; text-shadow : 0 0 12px rgba ( 0,0,0,0.6 ) ; text-transform : uppercase ; font-family : 'Roboto' , Tahoma, sans-serif ; letter-spacing : 4px ; overflow : hidden ; .glass span:before < position : absolute ; height : 200% ; width : 200% ; background : url ( "background.jpg" ) center no-repeat ; filter : blur ( 8px ) ;

Для получения не менее интересных эффектов можно использовать другие CSS фильтры, например: filter: blur(1px) grayscale(1)

Текст на черно-белом фоне

или filter: blur(1px) sepia(1)

Текст на фоне сепии

Аналогичный эффект можно получить используя CSS-свойство backdrop-filter , но оно имеет малую совместимость (подробнее на MDN)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *