filter

Experimental

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die BrowserkompatibilitÀt beachtet werden. Es ist auch möglich, dass die Syntax in einer spÀteren Spezifikation noch geÀndert wird.

Übersicht

Die filter CSS Eigenschaft erlaubt es, Effekte wie UnschÀrfe oder Farbverschiebungen auf Elemente anzuwenden, bevor sie angezeigt werden. Filter werden normalerweise dazu benutzt, die Darstellung eines Bildes, eines Hintergrunds oder eines Rahmens anzupassen.

Im CSS Standard inbegriffen sind mehrere Funktionen, die vordefinierte Effekte ermöglichen. Es können auch Filter verwendet werden, die ĂŒber SVG mit Hilfe des SVG Filter Elements angegeben wurden.

Hinweis: Ältere Versionen (4.0 bis einschließlich 9.0) des Internet Explorers unterstĂŒtzten eine nicht standardisierte "filter" Eigenschaft, die mittlerweile missbilligt wird.

Initialwertnone
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen
VererbtNein
Berechneter Wertwie angegeben
Animationstypeine Filterfunktionsliste

Syntax

Angabe einer Funktion:

filter: <filter-function> [<filter-function>]* | none

FĂŒr eine Referenz zu einem SVG <filter> Element:

filter: url(svg-url#element-id)

Beispiele

Beispiele zur Benutzung der vordefinierten Funktionen. Siehe die jeweilige Funktion fĂŒr ein spezifisches Beispiel.

.mydiv { filter: grayscale(50%) }

/* Graut alle Bilder um 50% aus und macht sie um 10px unscharf */
img {
  filter: grayscale(0.5) blur(10px);
}

Beispiele zur Benutzung der URL Funktion mit einer SVG Ressource.

.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }

Funktionen

Um die filter Eigenschaft zu verwenden, muss ein Wert fĂŒr die folgenden Funktionen angegeben werden. Falls der Wert ungĂŒltig ist, gibt die Funktion none zurĂŒck. Falls nicht anders angegeben, akzeptieren Funktionen, die eine Wertangabe mit Prozentzeichen (wie z. B. 34%) akzeptieren, auch einen dezimalen Wert (wie z. B. 0.34).

url(url)

Die url() Funktion erlaubt die Angabe einer XML Datei, die einen SVG Filter definiert, und kann auch einen Anker zu einem bestimmten Element beinhalten.

filter: url(resources.svg#c1)

blur(radius)

Wendet eine Gaußsche UnschĂ€rfe auf das Ursprungsbild an. Der Radiuswert gibt die Standardabweichung der Gaußschen Funktion an, oder wie viele Pixel auf dem Bildschirm mit einander vermischt werden. Ein höherer Wert erzeugt daher eine stĂ€rkere UnschĂ€rfe. Falls kein Parameter angegeben wird, wird 0 verwendet. Der Parameter wird dabei als <length> angegeben, akzeptiert jedoch keine Prozentwerte.

filter: blur(5px)
<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

brightness(amount)

Wendet eine lineare Multiplikation auf das Ursprungsbild an, sodass es dunkler oder heller erscheint. Ein Wert von 0% erzeugt ein Bild, das komplett schwarz ist. Ein Wert von 100% lĂ€sst das Bild unverĂ€ndert. Andere Werte sind lineare Multiplikationen dieses Effekts. Werte ĂŒber 100% sind erlaubt und erzeugen hellere Ergebnisse. Falls der amount Parameter fehlt, wird ein Wert von 100% verwendet.

filter: brightness(0.5)
<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="[amount]"/>
        <feFuncG type="linear" slope="[amount]"/>
        <feFuncB type="linear" slope="[amount]"/>
    </feComponentTransfer>
  </filter>
</svg>

contrast(amount)

Passt den Kontrast des Ursprungsbildes an. Ein Wert von 0% erzeugt ein Bild, dass komplett schwarz ist. Ein Wert von 100% lĂ€sst das Bild unverĂ€ndert. Werte ĂŒber 100% sind erlaubt und erzeugen Ergebnisse mit weniger Kontrast. Falls der amount Parameter fehlt, wird ein Wert von 100% verwendet.

filter: contrast(200%)
<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
    </feComponentTransfer>
  </filter>
</svg>

drop-shadow(<shadow>)

FĂŒgt dem Ursprungsbild einen Schlagschatteneffekt hinzu. Ein Schlagschatten ist dabei eigentlich eine unscharfe, versetzte Version der Alphamaske eines Bildes, die in einer bestimmten Farbe dargestellt wird und unterhalb des Bildes angezeigt wird. Die Funktion akzeptiert einen Parameter des Typs <shadow> (definiert in CSS3 Backgrounds), mit der Ausnahme, dass das SchlĂŒsselwort inset nicht erlaubt ist. Diese Funktion Ă€hnelt der verbreiteteren box-shadow Eigenschaft; der Unterschied besteht darin, dass manche Browser fĂŒr Filter Hardwarebeschleunigung fĂŒr eine höhere Geschwindigkeit unterstĂŒtzen. Die Parameter des <shadow> Wertes lauten wie folgt:

<offset-x> <offset-y> (benötigt)
Dies sind die zwei <length> Werte, die den Schattenversatz angeben. <offset-x> gibt die horizontale Distanz an. Negative Werte positionieren den Schatten links von dem Element. <offset-y> gibt die vertikale Distanz an. Negative Werte positionieren den Schatten oberhalb des Elements. Siehe <length> fĂŒr mögliche Einheiten.
Falls beide Werte 0 sind, wird der Schatten hinter dem Element platziert (und erzeugt möglicherweise einen UnschÀrfeeffekt, falls <blur-radius> und/oder <spread-radius> gesetzt sind).
<blur-radius> (optional)
Dies ist ein dritter <length> Wert. Je grĂ¶ĂŸer dieser Wert ist, desto grĂ¶ĂŸer ist die UnschĂ€rfe, d. h. der Schatten wird grĂ¶ĂŸer und unschĂ€rfer. Negative Werte sind nicht erlaubt. Falls nicht angegeben, wird 0 verwendet (der Schattenrand wird scharf dargestellt).
<spread-radius> (optional)
Dies ist ein vierter <length> Wert. Positive Werte erweitern den Schatten und lassen ihn grĂ¶ĂŸer erscheinen, negative Werte verkleinern den Schatten. Falls nicht angegeben, wird 0 verwendet (der Schatten hat die gleiche GrĂ¶ĂŸe wie das Element). 
Hinweis: WebKit und evtl. andere Browser unterstĂŒtzen diesen vierten Wert nicht. Er wird nicht dargestellt, falls er angegeben wird.
<color> (optional)
Siehe <color> fĂŒr mögliche SchlĂŒsselwörter und Angaben.
Falls nicht angegeben, bestimmt der Browser die Farbe. In Gecko (Firefox), Presto (Opera bis Version 12) und Trident (Internet Explorer) wird der Wert der color Eigenschaft verwendet. WebKit (Opera ab Version 15, Chrome) verwendet einen transparenten Schatten und ist daher nutzlos, falls <color> nicht angegeben wird.
filter: drop-shadow(16px 16px 10px black)
<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

grayscale(amount)

Konvertiert das Ursprungsbild in Graustufen. Der Wert von amount bestimmt den Anteil der Konvertierung. Ein Wert von 100% erzeugt ein komplett graues Ergebnis. Ein Wert von 0% lÀsst das Bild unverÀndert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

filter: grayscale(100%)

hue-rotate(angle)

Wendet eine Farbtonrotation auf das Ursprungsbild an. Der Wert von angle gibt die Gradzahl um den Farbkreis an, um den die Ursprungsfarben verschoben werden. Ein Wert von 0deg lÀsst das Bild unverÀndert. Falls der angle Parameter fehlt, wird 0deg verwendet. Der Maximalwert ist 360deg.

filter: hue-rotate(90deg)

invert(amount)

Invertiert die Ursprungsfarben des Ursprungsbildes. Der Wert von amount gibt den Anteil der Konvertierung an. Ein Wert von 100% erzeugt ein komplett invertiertes Ergebnis. Ein Wert von 0% lÀsst das Bild unverÀndert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

filter: invert(100%)

opacity(amount)

FĂŒgt den Farben des Ursprungsbildes eine Transparenz hinzu. Der Wert von amount gibt den Anteil der Konvertierung an. Ein Wert von 0% erzeugt ein komplett transparentes Ergebnis. Ein Wert von 100% lĂ€sst das Bild unverĂ€ndert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Dies ist equivalent zur Multiplikation der Ursprungsfarben mit amount. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet. Diese Funktion ist Ă€hnlich zu der verbreiteteren opacity Eigenschaft; der Unterschied besteht darin, dass manche Browser fĂŒr Filter Hardwarebeschleunigung fĂŒr eine höhere Geschwindigkeit unterstĂŒtzen.

filter: opacity(50%)

saturate(amount)

SĂ€ttigt das Ursprungsbild. Der Wert von amount gibt den Anteil der Konvertierung an. Ein Wert von 0% erzeugt ein komplett ungesĂ€ttigtes Ergebnis. Ein Wert von 100% lĂ€sst das Bild unverĂ€ndert. Andere Werte sind lineare Multiplikationen dieses Effekts. Werte fĂŒr amount ĂŒber 100% sind erlaubt und erzeugen ĂŒbersĂ€ttigte Ergebnisse. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

filter: saturate(200%)

sepia(amount)

Konvertiert das Ursprungsbild in Sepiafarben. Der Wert von amount bestimmt den Anteil der Konvertierung. Ein Wert von 100% erzeugt ein komplett sepiafarbenes Ergebnis. Ein Wert von 0% lÀsst das Bild unverÀndert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

filter: sepia(100%)

Kombinierte Funktionen

Eine beliebige Anzahl an Funktionen kann kombiniert werden, um die Ausgabe zu verÀndert. Das folgende Beispiel verstÀrkt den Kontrast und die Helligkeit des Bildes.

filter: contrast(175%) brightness(3%)

Spezifikation

Spezifikation Status Kommentar
Filter Effects Module Level 1
Die Definition von 'filter' in dieser Spezifikation.
Arbeitsentwurf UrsprĂŒngliche Definition

Browser KompatibilitÀt

BCD tables only load in the browser

Siehe auch