Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Ihre Suchergebnisse

    filter

    Dies ist eine experimentelle Technologie
    Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der 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
    Medienvisuell
    Berechneter Wertwie angegeben
    AnimierbarJa
    Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

    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="https://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="https://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 0% erzeugt ein Bild, das 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="https://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="https://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

    Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Grundlegende Unterstützung 18.0-webkit
     (siehe Hinweis)    		 35 (35)
     (siehe Hinweis)    		 Nicht unterstützt (siehe Hinweis) 15.0-webkit 6.0-webkit
    Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Grundlegende Unterstützung 4.4-webkit 35 (35) Nicht unterstützt 22.0 (Ja)-webkit

    6.0 (Ja)-webkit

    Gecko Hinweise

    Vor Firefox 34 war nur die url() Form der filter Eigenschaft aktiviert.

    Internet Explorer Hinweise

    Internet Explorer 4.0 bis 9.0 implementierte eine nicht standardisierte filter Eigenschaft. Die Syntax war komplett unterschiedlich zu dieser und ist hier nicht dokumentiert.

    Chrome Hinweise

    In Chrome 18 bis 19,  erlaubt die saturate() Funktion nur Ganzzahlen anstatt Dezimalzahlen oder Prozentwerte. Dieser Bug ist ab Chrome 20 behoben.

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Schlagwörter: 
     Mitwirkende an dieser Seite: Sebastianz, Prinz_Rana, teoli, SJW
     Zuletzt aktualisiert von: Sebastianz,