Funktion blur

Die Funktion blur ermöglicht es, Hintergrundbilder nach Gauß unscharf zu machen.

Syntax

cssSelektor {
  filter: blur(Weichzeichnungsradius);
}

Beispiel

Lassen Sie uns für unser Bild eine Unschärfe von 2px einstellen:

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

Результат:

Siehe auch

die Funktion brightness,
die die Helligkeit des Hintergrunds festlegt
die Funktion contrast,
die den Kontrast des Hintergrunds festlegt
die Funktion drop-shadow,
die einen Schatten für den Hintergrund festlegt
die Funktion hue-rotate,
die die Farbton des Hintergrunds festlegt
die Funktion invert,
die die Farben des Hintergrunds invertiert
die Funktion opacity,
die die Transparenz des Hintergrunds festlegt
die Funktion sepia,
die den Hintergrund in Sepia umwandelt
die Eigenschaft background,
die eine Kurzform-Eigenschaft für den Hintergrund darstellt
die Eigenschaft background-image,
mit der einem Block ein Hintergrundbild zugewiesen werden kann
die Eigenschaft filter,
die den Stil für den Hintergrund festlegt