blur()

Базовая Широкодоступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2016 года.

Функция blur() CSS функция применяет гауссовское размытие к входному изображению. Результат — <filter-function>.

Попробовать

Синтаксис

Функция blur() применяет гауссовское размытие к элементам, к которым она применена.

blur(radius)

Параметры

radius: Радиус размытия, заданный как <length>. Он определяет значение стандартного отклонения гауссовой функции, то есть количество пикселей на экране, которые смешиваются друг с другом; таким образом, большее значение создаст большее размытие. Значение 0 оставляет входной элемент без изменений. Начальное значение для интерполяции равно 0. Процентные значения недопустимы.

Установка размытия в пикселях и с помощью rem

blur(0)        /* No effect */
blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

Фильтр SVG

Элемент фильтра SVG <feGaussianBlur> также можно использовать для размытия содержимого. Атрибут фильтра stdDeviation может принимать до двух значений, позволяя создавать более сложные значения размытия. Для создания эквивалентного размытия мы включаем одно значение для stdDeviation. Этот эффект SVG затем можно использовать по его идентификатору:

<svg role="none">
  <filter id="blur11">
    <feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
  </filter>
</svg>

Следующие объявления производят тот же эффект:

filter: blur(1.1px);
filter: url(#blur11); /* with embedded SVG */
filter: url(folder/fileName.svg#blur11); /* external svg filter definition */

Примеры

Этот пример показывает три изображения: изображение с применением функции фильтра blur() , изображение с применением эквивалентной функции размытия SVG и исходные изображения для сравнения:

.filter {
  filter: blur(3.5px);
}

<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url(#blur)" />
</svg>

Спецификации

Спецификация
Модуль фильтров уровня 1 # funcdef-filter-blur

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`blur`	18	12	35	15	6	53	35	14	6	6.0	4.4

См. также

Модуль CSS-фильтров
Другие <filter-function> функции, доступные для использования в значениях свойств filter и backdrop-filter включают:

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur