De blur-functie

De functie blur maakt het mogelijk om achtergrondafbeeldingen volgens Gauss te vervagen.

Syntaxis

cssselector {
  filter: blur(vervagingsgrootte);
}

Voorbeeld

Laten we een vervaging van 2px instellen voor onze afbeelding:

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;
}

Результат:

Zie ook

de functie brightness,
die de helderheid van de achtergrond instelt
de functie contrast,
die het contrast van de achtergrond instelt
de functie drop-shadow,
die een schaduw voor de achtergrond instelt
de functie hue-rotate,
die de kleurtoon van de achtergrond instelt
de functie invert,
die de kleuren van de achtergrond inverteert
de functie opacity,
die de transparantie van de achtergrond instelt
de functie sepia,
die de achtergrond omzet naar sepiakleurig
de eigenschap background,
dat een verkorte eigenschap voor de achtergrond is
de eigenschap background-image,
waarmee een achtergrondafbeelding voor een blok kan worden ingesteld
de eigenschap filter,
die de stijl voor de achtergrond instelt