blur()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
Die blur()
CSS Funktion wendet einen Gaussian Blur auf das Eingabebild an. Das Ergebnis ist eine <filter-function>
.
Probieren Sie es aus
Syntax
Die blur()
Funktion wendet einen Gaussian Blur auf die Elemente an, auf die sie angewendet wird.
blur(radius)
Parameter
radius
-
Der Radius der Unschärfe, angegeben als
<length>
. Er definiert den Wert der Standardabweichung für die Gaussian-Funktion, d.h., wie viele Pixel auf dem Bildschirm ineinander übergehen; ein größerer Wert führt zu mehr Unschärfe. Ein Wert von0
lässt die Eingabe unverändert. Der Ausgangswert für die Interpolation ist0
. Prozentwerte sind ungültig.
Einstellung einer Unschärfe mit Pixeln und mit rem
blur(0) /* No effect */
blur(8px) /* Blur with 8px radius */
blur(1.17rem) /* Blur with 1.17rem radius */
SVG-Filter
Das SVG <feGaussianBlur>
Filter-Element kann ebenfalls verwendet werden, um Inhalte zu verwischen. Das stdDeviation
Attribut des Filters akzeptiert bis zu zwei Werte, die komplexere Unschärfe-Werte ermöglichen. Um eine äquivalente Unschärfe zu erzeugen, geben wir einen Wert für stdDeviation
an. Dieser SVG-Effekt kann dann durch eine ID referenziert werden:
<svg role="none">
<filter id="blur11">
<feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
</filter>
</svg>
Die folgenden Deklarationen erzeugen denselben Effekt:
filter: blur(1.1px);
filter: url(#blur11); /* with embedded SVG */
filter: url(folder/fileName.svg#blur11); /* external svg filter definition */
Formale Syntax
Beispiele
Dieses Beispiel zeigt drei Bilder: das Bild mit einer blur()
Filterfunktion angewendet, das Bild mit der äquivalenten SVG-Unschärfefunktion angewendet und die Originalbilder zum Vergleich:
.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>
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # funcdef-filter-blur |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
blur() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- CSS-Filtereffekte Modul
- Die anderen
<filter-function>
Funktionen, die in den Werten derfilter
undbackdrop-filter
Eigenschaften verwendet werden können, umfassen: