Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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.
Die CSS-Funktion blur() wendet eine gaußsche Unschärfe 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
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. Der Wert definiert die Standardabweichung der Gauß-Funktion und bestimmt damit, wie viele Pixel auf dem Bildschirm ineinander übergehen. Ein größerer Wert erzeugt daher eine stärkere Unschärfe. Bei einem Wert von
0bleibt die Eingabe unverändert. Der Anfangswert für die Interpolation ist0. Prozentwerte und negative Werte sind ungültig. Der Standardwert ist0.
SVG-Filter
Auch das SVG-Filterelement <feGaussianBlur> kann verwendet werden, um Inhalte unscharf darzustellen. Das Attribut stdDeviation des Filters akzeptiert bis zu zwei Werte, mit denen sich komplexere Unschärfeeffekte erzeugen lassen. Für einen gleichwertigen Unschärfeeffekt geben wir einen Wert für stdDeviation an. Auf diesen SVG-Effekt kann dann über seine ID verwiesen 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
<blur()> =
blur( <length>? )
Beispiele
Dieses Beispiel zeigt drei Bilder: eines mit angewendeter blur()-Filterfunktion, eines mit der entsprechenden SVG-Unschärfefunktion und das Originalbild 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>
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
- Modul CSS-Filtereffekte
- Zu den weiteren
<filter-function>-Funktionen, die als Werte der Eigenschaftenfilterundbackdrop-filterverwendet werden können, gehören: