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 Gaußschen Weichzeichner auf das Eingabebild an. Das Ergebnis ist eine <filter-function>.

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

Die blur() Funktion wendet einen Gaußschen Weichzeichner auf die Elemente an, auf die sie angewendet wird.

css

blur(radius)

Parameter

radius Optional: Der Radius des Weichzeichners, angegeben als <length>. Er definiert den Wert der Standardabweichung für die Gaußfunktion, d.h., wie viele Pixel auf dem Bildschirm ineinander übergehen; daher erzeugt ein größerer Wert mehr Weichzeichnung. Ein Wert von 0 lässt die Eingabe unverändert. Der anfängliche Wert für Interpolation ist 0. Prozentwerte sind ungültig. Der Standardwert ist 0px.

Beispiele für Weichzeichnerwerte

css

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

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

Das SVG-Element <feGaussianBlur> kann ebenfalls verwendet werden, um Inhalte weichzuzeichnen. Das Attribut stdDeviation des Filters akzeptiert bis zu zwei Werte, was die Erstellung komplexerer Weichzeichnerwerte ermöglicht. Um einen äquivalenten Weichzeichner zu erstellen, geben wir einen Wert für stdDeviation an. Dieser SVG-Effekt kann dann per ID referenziert werden:

html

<svg role="none">
  <filter id="blur11">
    <feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
  </filter>
</svg>

Die folgenden Deklarationen erzeugen den gleichen Effekt:

css

filter: blur(1.1px);
filter: url(#blur11); /* with embedded SVG */
filter: url(folder/fileName.svg#blur11); /* external svg filter definition */

Formale Syntax

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

Beispiele

Dieses Beispiel zeigt drei Bilder: das Bild mit einer angewendeten blur() Filterfunktion, das Bild mit der äquivalenten SVG-Weichzeichnerfunktion und die Originalbilder zum Vergleich:

css

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

html

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

svg:not([height]) {
  display: none;
}

<table cellpadding="5">
  <thead>
    <tr>
      <th>Live example</th>
      <th>SVG Equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <svg id="svg" height="220" width="220" style="overflow: visible">
          <filter id="svgBlur">
            <feGaussianBlur stdDeviation="3.5" />
          </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(#svgBlur)" />
        </svg>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

CSS-Filtereffekte Modul
Die anderen in Werten der filter und backdrop-filter Eigenschaften verwendbaren <filter-function> Funktionen umfassen: