Vertiefende Kenntnisse zur Verwendung des Filterattributs in CSS

In diesem Artikel geht es nur um die Verwendung von CSS-Filtern. Ich hoffe, dass er für Freunde hilfreich ist.

So verwenden Sie CSS-Filter: filter:filtername(parameters) Das heißt, filter:filtername (parameters)

Alpha: Legen Sie die Transparenzstufe fest
Unschärfe: Erstellen Sie eine hohe Geschwindigkeit Bewegungseffekt, also der Unschärfeeffekt
Chroma: Eine spezielle Farbe transparent machen
DropShadow: Einen festen Schatten des Objekts erstellen
FlipH: Ein horizontales Spiegelbild erstellen
FlipV: Einen vertikalen Spiegel erstellen Bild
Glühen: Leuchten in der Nähe von Objekten außerhalb des Randes hinzufügen
Grau: Bild in Graustufen umwandeln
Umkehren: Farbe umkehren
Licht: Eine Lichtquelle auf dem Objekt erstellen
Maske: Erstellen eine transparente Maske auf dem Objekt
Schatten: Erstellen Sie einen versetzten festen Schatten
Welle: Welleneffekt
und verwenden Sie dann vordefiniertes CSS für die erforderlichen Objekte auf der Seite. Tatsächlich wurde die Syntax dieser Filter geändert Wir müssen nur die entsprechenden spezifischen Parameter eingeben.

2. Schreiben Sie CSS-Filtercode direkt auf das HTML-Steuerelement, das CSS-Filtereffekte unterstützt.

Alphafilter: Wenn Sie diesen Namen hören, denken Sie vielleicht, dass er in Flash ist, und es scheint, als hätten Sie ihn in Photoshop gesehen. Ja, sie machen im Grunde das Gleiche, nämlich ein Zielelement mit dem Hintergrund zu verschmelzen. Sie können numerische Werte angeben, um den Grad der Mischung zu steuern. Laienhaft ausgedrückt ist diese „Vermischung mit dem Hintergrund“ die Transparenz eines Elements

Syntax: STYLE="filter: Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY =startY , FinishX = beenden

FinishOpacity: Zielwert.

Stil: 1 oder 2 oder 3

StartX: beliebiger Wert

StartY: beliebiger Wert
Beispiel: filter:Alpha(Opacity="0″,FinishOpacity="75″,Style="2″ )

Unschärfefilter: Dies ist einer der CSS-Filter, der den Effekt dreidimensionaler Zeichen erzeugen kann. Dies bringt große Vorteile für die Verwendung dreidimensionaler Zeichen als Titel im Web Dies ist praktisch und reduziert das Gewicht Ihrer Webseite; das Laden des Unschärfefilters auf das Bild kann zwar den gleichen Effekt mit Bildverarbeitungssoftware erzielen, es ist jedoch viel bequemer, den Unschärfefilter zu verwenden .

Syntax: STYLE="filter:Blur(Add = hinzufügen, Richtung = Richtung, Stärke = Stärke)"
Beschreibung:
Hinzufügen: Im Allgemeinen 1 oder 0.

Richtung: Winkel, 0~315 Grad, Schrittgröße beträgt 45 Grad.

Stärke: Der Wert des Effektwachstums, im Allgemeinen ist 5 ausreichend.

Beispiel: filter:Blur(Add="1″,Direction="45″,Strength="5″)

Chroma-Filter: Farbintensität des Objekts festlegen
Syntax: STYLE= " filter:Chroma(Color = color)"
Beschreibung: Farbe: #rrggbb-Format, beliebig.
Beispiel: filter:Chroma(Color="#FFFFFF")

DropShadow-Filter: Wie der Name schon sagt, fügt er dem Objekt einen Schatteneffekt hinzu. Der eigentliche Effekt ist, als ob das Originalobjekt die Seite verlässt und ein Schatten des Objekts auf der Seite erscheint. Das Arbeitsprinzip besteht darin, einen Offset festzulegen und dann eine Farbe hinzuzufügen.

Syntax: STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
Beschreibung: Farbe: #rrggbb-Format, beliebig.
Offx: X-Achsen-Abweichungswert.
Offy: Y-Achsen-Versatzwert.

Positiv: 1 oder 0.

Beispiel: filter:DropShadow(Color="#6699CC",OffX="5″,OffY="5″,Positive="1″)

FlipH-Filter: horizontale Inversion erreichen
Syntax : STYLE="filter:FlipH"
Beispiel: filter:FlipH
FlipV-Filter: Filter zum Erreichen einer vertikalen Inversion
Syntax: STYLE="filter:FlipV"

Beispiel: filter: FlipV

Glühfilter: Nach der Verwendung des Attributs „Glühen“ auf ein Objekt erzeugt der Rand des Objekts einen glühähnlichen Effekt.
Syntax: STYLE="filter:Glow(Color=color, Strength= Strength)"
Beschreibung:
Farbe: leuchtende Farbe.
Stärke: Stärke (0-100)

Beispiel: filter:Glow(Color="#6699CC",Strength="5″)

Graufilter: Verwenden Sie den Graufilter, um ein Bild zu drehen in ein Graustufenbild

Syntax: STYLE="filter:Gray"
Beispiel: filter:Gray

Filter umkehren: Wie der Name schon sagt, invertieren Sie das Objekt

Syntax: STYLE ="filter:Invertieren"

Beispiel: filter:Invertieren

Maskenfilter: Verwenden Sie das Attribut „MASKE“, um einen Film zu erstellen, der die Oberfläche des Objekts bedeckt. Der Effekt ist, als würde man Objekte mit einer farbigen Brille sehen das gleiche

Syntax: STYLE="filter:Mask(Color=color)"

Beispiel: filter:Mask (Color="#FFFFE0″)

Schattenfilter: „Shadow“-Attribute können verwendet werden legt die Projektion eines Objekts in der angegebenen Richtung fest, COLOR ist die Projektionsfarbe und DIRECTION legt die Richtung der Projektion fest. Wobei 0 Grad die Vertikale nach oben darstellt und alle 45 Grad eine Einheit darstellen. Der Standardwert beträgt 270 Grad nach links.

Syntax: filter:Shadow(Color=color, Direction=direction)
Beschreibung:
Farbe: #rrggbb-Format.

Richtung: Winkel, 0-315 Grad, Schrittgröße beträgt 45 Grad.

Beispiel: Filter:Shadow (Color="#6699CC", Direction="135″)

Wellenfilter: Vielleicht können Sie sich seine Wirkung anhand des Namens vorstellen. Wie Sie denken, besteht seine Funktion darin, das Objekt in einem vertikalen Wellenformstil zu verzerren und dadurch einen Spezialeffekt zu erzeugen.
Syntax: Filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)
Beschreibung:
Add: Im Allgemeinen 1 oder 0.
Freq: Verformungswert.
LightStrength: Verformungsprozentsatz.
Phase: Prozentsatz der Winkelverformung.
Stärke: Verformungsfestigkeit.
Beispiel: Filter: wave(Add="0″, Phase="4″, Freq="5″, LightStrength="5″, Strength="2″)

Röntgenfilter: nur Anzeige der Umriss eines Objekts
Syntax: STYLE="filter:Xray"
Beispiel: filter:Xray

Das obige ist der detaillierte Inhalt vonVertiefende Kenntnisse zur Verwendung des Filterattributs in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!