CSS-Funktion `blur()`

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2016 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Funktion blur() wendet eine gaußsche Unschärfe auf das Eingabebild an. Sie wird als Wert für die Eigenschaften filter und backdrop-filter verwendet.

Probieren Sie es aus

filter: blur(0);

filter: blur(4px);

filter: blur(1.5rem);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

css

/* No blur */
blur()
blur(0)

/* Blur with 8px radius */
blur(8px)

/* Blur with 1.17rem radius */
blur(1.17rem)

Parameter

<length> Optional: Gibt den Radius der Unschärfe an. Er legt den Wert der Standardabweichung für die Gauß-Funktion fest, also wie viele Pixel auf dem Bildschirm ineinander übergehen. Ein größerer Wert erzeugt daher eine stärkere Unschärfe. Ein Wert von 0 lässt das Eingabebild unverändert. Der Anfangswert für die Interpolation ist 0. Prozentwerte und negative Werte sind ungültig. Der Standardwert ist 0.

Formale Syntax

<blur()> = 
  blur( <length>? )

Beispiele

Verwendung des SVG-Filters

Dieses Beispiel zeigt drei Bilder zum Vergleich: ein Bild mit angewendeter blur()-Filterfunktion, ein Bild mit dem entsprechenden SVG-Filter und das Originalbild.

SVG

Mit dem SVG-Filterelement <feGaussianBlur> lassen sich Inhalte ebenfalls weichzeichnen. Wir setzen stdDeviation auf den Unschärferadius. Anschließend können wir über die ID von <filter> auf den SVG-Effekt verweisen:

html

<svg height="0" role="none">
  <filter id="blur35" color-interpolation-filters="sRGB">
    <feGaussianBlur stdDeviation="3.5" />
  </filter>
</svg>

Die folgenden Deklarationen erzeugen denselben Effekt:

css

filter: blur(3.5px);
filter: url("#blur35"); /* with embedded SVG */
filter: url("fileName.svg#blur35"); /* external SVG */

CSS

Wir verwenden CSS, um Elemente anhand ihrer Klasse css-filter oder svg-filter weichzuzeichnen:

css

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

.svg-filter {
  filter: url("#blur35");
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th><code>blur()</code> filter</th>
      <th>SVG filter equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Spezifikationen

Spezifikation
Filter Effects Module Level 1 # funcdef-filter-blur

Browser-Kompatibilität

Siehe auch

Modul CSS-Filtereffekte
Zu den weiteren <filter-function>-Funktionen, die als Werte für die Eigenschaften filter und backdrop-filter verwendet werden können, gehören:

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS-Funktion blur()

SVG

CSS

Help improve MDN

CSS-Funktion `blur()`