CSS3 Filter(Filters)

CSS3Filtereffekte bieten eine einfache Methode, um visuelle Effekte auf Bilder anzuwenden.

CSS3Filterfunktionen diskutieren

In diesem Kapitel werden wir die CSS3eingeführt werden, können auf visuelle Elemente wie Bilder vor der Anwendung von Filtereffekten auf der Webseite durchgeführt werden, wie Verzerrung, Kontrast- und Helligkeitsausgleich, Farbsättigung usw.

Filtereffekte, die durch CSS3 Der Filter-Attribute wendet Filtereffekte auf Elemente an und akzeptiert eine oder mehrere Filterfunktionen in der angegebenen Reihenfolge. Ein Beispiel ist:

filter:　blur()　|　brightness()　|　contrast()　|　drop-shadow()　|　grayscale()　|　hue-rotate()　|　invert()　|　opacity()　|　sepia()　|　saturate()　|　url();

Warnung：Jede Version von Internet Explorer unterstützt derzeit nicht CSS3Filtereffekte. Ältere IE-Versionen unterstützen den nicht standardisierten Filter-Attribute, um Effekte wie Transparenz zu erstellen, aber diese Funktion wurde abgekündigt.

Verzerrungseffekt

Wie das Gaussische Rauschen in Photoshop kann die Funktion blur() auf Elemente angewendet werden. Diese Funktion akzeptiert CSS-Längenwerte als Parameter zur Definition des Verzerrungsradius. Größere Werte erzeugen mehr Verzerrung. Wenn kein Parameter angegeben wird, wird der Wert 0 verwendet.

img　{
　　　　-webkit-filter:　blur(5px);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　blur(5px);
}

—Die Ausgabe des obigen Beispiels ist wie folgt:

Bildhelligkeit einstellen

Die Funktion brightness() kann verwendet werden, um die Helligkeit des Bildes zu setzen. Der Wert 0% erstellt ein vollkommen schwarzes Bild. Und der Wert100% oder1das Bild unverändert lassen. Andere Werte sind lineare Multiplikatoren des Effekts.

Sie können die Helligkeit auch auf einen Wert über100％，damit das Bild heller wird. Wenn das Anzahlparameter fehlt, wird der Wert verwendet1。Negative Werte sind nicht erlaubt.

img.bright　{
　　　　-webkit-filter:　brightness(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　brightness(200%);
}
img.dark　{
　　　　-webkit-filter:　brightness(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　brightness(50%);
}

—Die Ausgabe des obigen Beispiels ist wie folgt:

Bildkontrast anpassen

Die Funktion contrast() wird verwendet, um den Kontrast des Bildes anzupassen. Der Wert 0% erstellt ein vollkommen schwarzes Bild. Und der Wert100% oder1das Bild unverändert lassen. Es wird auch über100％ des Wertes, um ein geringeres Kontrastergebnis zu bieten. Wenn das Anzahlparameter fehlt oder weggelassen wird,1dann wird der Wert verwendet.

img.bright　{
　　　　-webkit-filter: Kontrast(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: Kontrast(200%);
}
img.dim　{
　　　　-webkit-filter: Kontrast(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: Kontrast(50%);
}

—Die Ausgabe des obigen Beispiels ist wie folgt:

Schatten zum Bild hinzufügen

Sie können den drop-Schatten() Funktion wendet den Schatteneffekt auf Bilder wie Photoshop an. Diese Funktion ähnelt derBox-SchattenEigenschaften.

img　{
　　　　-webkit-filter: Fall-Schatten(4px　4px　10px orange);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: Fall-Schatten(4px　4px　10px orange);
}

—Die Ausgabe des obigen Beispiels ist wie folgt:

Das Bild in Graustufen umwandeln

Mit dieser grayscale() Funktion kann das Bild in Graustufen umgewandelt werden. Der Wert100% ist vollständig in Graustufen. Ein Wert von 0% lässt das Bild unverändert. Werte von 0% bis100% ist der lineare Multiplikator des Effekts. Wenn der Parameter "amount" fehlt, wird der Wert 0 verwendet.

img.complete-Gray　{
　　　　-webkit-filter: Graustufen(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: Graustufen(100%);
}
img.partial-Gray　{
　　　　-webkit-filter: Graustufen(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: Graustufen(50%);
}

—Die Ausgabe des obigen Beispiels ist wie folgt:

Farbtonrotation auf das Bild anwenden

Dieser Farbton-Die rotate() Funktion wendet eine Farbtonrotation auf das Bild an. Die übergebenen Parameter definieren die Gradzahl, um die das Farbspektrum des Bildbeispiels gedreht wird. Der Wert 0deg behält das Bild unverändert. Wenn angle fehlt' 'Parameter, 0deg wird der Wert verwendet. Es gibt keine maximale Größe, der Wert der obigen Wirkung wird360deg zurückwickeln.

img.farbton-Normal　{
　　　　-webkit-filter: Farbton-Drehen(150deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: Farbton-Drehen(150deg);
}
img.farbton-Umwickeln　{
　　　　-webkit-filter: Farbton-Drehen(480deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: Farbton-Drehen(480deg);
}

—Die Ausgabe des obigen Beispiels ist wie folgt:

Invertiereffekt

Der invert() Funktion kann ein Invertiereffekt wie in Photoshop auf ein Bild angewendet werden. 100% oder1Der Wert wird vollständig invertiert. Ein Wert von 0% lässt den Eingang unverändert. Werte von 0% bis10Werte zwischen 0％ sind lineare Multiplikatoren des Effekts. Wenn der Parameter "amount" fehlt, wird der Wert 0 verwendet. Negative Werte sind nicht erlaubt.

img.partially-Invertiert　{
　　　　-webkit-filter: Invertieren(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: Invertieren(80%);
}
img.fully-Invertiert　{
　　　　-webkit-filter: Invertieren(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: Invertieren(100%);
}

—Die Ausgabe des obigen Beispiels ist wie folgt:

Untransparenz auf das Bild anwenden

Die Transparenz() Funktion kann verwendet werden, um Transparenz zu einem Bild hinzuzufügen. Der Wert 0% ist vollständig transparent. Der Wert100% oder1Beibehaltung des Bildes unverändert. Der Wert 0% ist vollständig transparent und100%ist der lineare Effektmultiplikator. Wenn das & fehlt39; amount'Parameter, dann verwenden Sie den Wert1。Diese Funktion ähnelt derTransparenzEigenschaften.

img　{
　　　　-webkit-filter: Transparenz(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: Transparenz(80%);
}

—Die Ausgabe des obigen Beispiels ist wie folgt:

Das Brauntönungseffekt wird auf das Bild angewendet

Die Funktion sepia() wandelt das Bild in Sepia um.101ist vollkommen braun. Der Wert 0%behalten Sie das Bild unverändert. Zwischen den Werten 0缻,100%ist der lineare Effektmultiplikator. Wenn das & fehlt39; amount'Parameter, dann verwenden Sie den Wert 0.

img.complete-sepia　{
　　　　-webkit-filter:　sepia(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(100%);
}
img.partial-sepia　{
　　　　-webkit-filter:　sepia(30%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(30%);
}

—Die Ausgabe des obigen Beispiels ist wie folgt:

Anpassung der Bildsättigung

Die Funktion saturate() kann zur Anpassung der Sättigung des Bildes verwendet werden. Der Wert 0% ist vollkommen unsättigt. Der Wert100%behalten Sie das Bild unverändert. Andere Werte sind lineare Multiplikatoren für den Effekt. Es sind auch Werte über100％bietet einen übertriebenen Kontrast. Wenn das & fehlt39;amount 'Parameter, dann verwenden Sie den Wert1。

img.un-saturated　{
　　　　-webkit-filter:　saturate(0%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(0%);
}
img.super-saturated　{
　　　　-webkit-filter:　saturate(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(200%);
}

—Die Ausgabe des obigen Beispiels ist wie folgt: