`blur()` CSS-Funktion

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.

Die blur() CSS Funktion wendet einen Gaussian Blur auf das Eingabebild an. Ihr 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

css

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

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

Parameter

<length> Optional: Gibt den Radius der Unschärfe an. Es definiert den Wert der Standardabweichung für die Gaußsche Funktion, also wie viele Pixel auf dem Bildschirm ineinander übergehen. Daher erzeugt ein größerer Wert mehr Unschärfe. Ein Wert von 0 lässt die Eingabe unverändert. Der Anfangswert für Interpolation ist 0. Prozentwerte sind ungültig. Der Standardwert ist 0.

Das SVG <feGaussianBlur> Filterelement kann ebenfalls verwendet werden, um Inhalte zu verwischen. Das Attribut stdDeviation des Filters akzeptiert bis zu zwei Werte, um komplexere Unschärfewerke zu erzeugen. Um eine äquivalente Unschärfe zu erzeugen, verwenden wir einen Wert für stdDeviation. Dieser SVG-Effekt kann dann durch ID referenziert werden:

html

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

Die folgenden Deklarationen erzeugen denselben 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 blur()-Filterfunktion angewendet, das Bild mit der äquivalenten SVG-Blur-Funktion angewendet 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;
}

th,
td {
  padding: 5px;
}

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

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

Browser-Kompatibilität

Siehe auch

CSS-Filtereffekte Modul
Die anderen <filter-function> Funktionen, die in den Werten der filter und backdrop-filter Eigenschaften verwendet werden können, sind:

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

blur() CSS-Funktion

Help improve MDN

`blur()` CSS-Funktion