Die Essenz von CSS-Filtereffekten

Autor：Eve Cole Aktualisierungszeit：2009-06-12 17:23:02

Der HTML-Beispielcode und der darin enthaltene CSS-Code sind unten aufgeführt. Das darin verwendete Bild ist fd.jpg. Kopieren Sie den Code und nennen Sie ein Bild fd.jpg, um den vollständigen Effekt zu

sehen //DTD HTML 4.01 Transitional//DE">

CSS-Filtereffekt.html

FiltereigenschaftenBeschreibungParameter und WerteEffektbeispiele< /td >
AlphaTransparenzeffekt festlegenDeckkraft: Transparenzstufe, 0 bis 100, 0 ist vollständig transparent

Stil: Gibt die Formeigenschaften des transparenten Bereichs an. 0 ist eine gleichmäßige Verteilung. 2 ist eine radiale Verteilung von 0 bis 100

startX, startY: Startkoordinaten des Verlaufstransparenzeffekts
finishX, finishY: Endkoordinaten des Verlaufstransparenzeffekts

UnschärfeErstellen Sie einen Unschärfeeffekthinzufügen: Geben Sie an, ob das Bild in einen Unschärfeeffekt geändert werden soll, wahr und falsch

Richtung: Legen Sie die Unschärferichtung fest. 0 Grad bedeutet vertikal nach oben. Alle 45 Grad sind eine Einheit. Der Standardwert ist 270 Grad nach links.
Stärke: Gibt an, wie viele Pixel der Breite von der Unschärfe betroffen sind. Der Standardwert ist 5< /td>

VIEL GLÜCK!

ChromaSetzen Sie die angegebene Farbe auf transparentFarbe: Geben Sie transparente Farbe anChroma

Beispiel < /div>
DropShadowErstellen Sie einen versetzten Bildumriss, das heißt, werfen Sie einen SchattenFarbe: die Farbe der Projektion
offx, offy: Schatten im x-, y-Richtungsversatz

positiv: true erstellt einen Schatten für jedes nicht transparente Pixel, false erstellt einen Schatten für transparente Pixel

Beispiel für einen Schlagschatten

FlipHHorizontaler FlipKeine

Horizontaler Flip

< /tr>
FlipVVertikaler FlipKeine

Vertikaler Flip

< /tr>
GlühenFügen Sie Lichteffekte zur äußeren Begrenzung des Objekts hinzuFarbe: Geben Sie die Farbe des Lichts an

Stärke: Lichtstärke

GLOW-Beispiel

GrauReduziert die Farbe des Bildes und wandelt es in Graustufen umKeine

InvertierenInvertiert Farb-, Sättigungs- und Helligkeitswerte vollständig, um einen negativen Effekt zu erzeugen.Keine

LichtLicht auf ein Objekt projizierenNeinNein
MaskeErstellen Sie eine transparente Maske für ein ObjektFarbe: Geben Sie die Farbe der Maske an

MASK-Beispiel

SchattenErstellen Sie einen festen Umriss eines Objekts, also einen SchatteneffektFarbe: Projektionsfarbe
Richtung: Projektionsrichtung < div class="shadows">SHADOW-Beispiel

WelleVerwenden Sie sinusförmige Wellen, um das Bild in Richtung der es stören

Frequenz: Die Häufigkeit der Wellenerzeugung (wie viele Wellen werden erzeugt)
Lichtstärke: Verstärken Sie die Wirkung der erzeugten Wellen (Wert liegt zwischen 0 und 100)

Phase: Stellen Sie den Versatz am Anfang der Sinuswelle ein, im Allgemeinen 0, bis zu 100
Stärke: Stellen Sie die Amplitude der Sinuswelle ein

WAVE-Beispiel
RöntgenNur den Umriss des Objekts anzeigenKeine