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-Unschärfe-Effekt 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

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 der Gaußschen Funktion, das heißt, wie viele Pixel auf dem Bildschirm miteinander vermischt werden. Daher erzeugt ein größerer Wert mehr Unschärfe. Ein Wert von 0 belässt die Eingabe unverändert. Der Anfangswert für die Interpolation ist 0. Prozentwerte sind ungültig. Der Standardwert ist 0.

Das SVG <feGaussianBlur> Filter-Element kann ebenfalls verwendet werden, um Inhalte zu verwischen. Das stdDeviation Attribut des Filters akzeptiert bis zu zwei Werte, was die Erstellung komplexerer Unschärfewerter ermöglicht. Um einen äquivalenten Unschärfeeffekt zu erzeugen, 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 blur() Filterfunktion, das Bild mit der äquivalenten SVG-Unschärfefunktion 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

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

Browser-Kompatibilität

Siehe auch

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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