Функция blur

Функцията blur позволява да размазвате фонови изображения по Гаус.

Синтаксис

cssселектор {
  filter: blur(размер на размазване);
}

Пример

Нека зададем на нашето изображение размазване от 2px:

html<div id="elem"></div>
css#elem {
  filter: blur(2px);
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Вижте също

  • функцията brightness,
    която задава яркост на фона
  • функцията contrast,
    която задава контраст на фона
  • функцията drop-shadow,
    която задава сянка на фона
  • функцията hue-rotate,
    която задава цветова тоналност на фона
  • функцията invert,
    която инвертира цветовете на фона
  • функцията opacity,
    която задава прозрачност на фона
  • функцията sepia,
    която преобразува фона в сепия
  • свойството background,
    което е съкратено свойство за фон
  • свойството background-image,
    с което може да зададете фонова картинка на блок
  • свойството filter,
    което задава стил за фона