Welche Filter werden von CSS3 unterstützt?

Die von CSS3 unterstützten Filter sind durch das Filterattribut definiert, einschließlich: 1. Unschärfefilter, der das Bild mit Gaußscher Unschärfe versehen kann; 3. Kontrastfilter; 5. Graustufenfilter; Filter; 6. Farbtonrotationsfilter; 8. Transparenzfilter; 10. Sepiafilter;

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die von CSS3 unterstützten Filter sind visuelle Effekte, die durch das Filterattribut definiert werden.

Funktion (visueller Effekt), die durch das Filterattribut eingestellt werden kann

1. Unschärfefilter (px)

Gaußsche Unschärfe für das Bild festlegen. Je größer der Wert, desto unschärfer ist es. Der Standardwert ist 0, was bedeutet, dass es keine Unschärfe gibt.

filter:blur(4px);

2. Helligkeitsfilter (%)

Wenden Sie eine lineare Multiplikation auf das Bild an, um es heller oder dunkler erscheinen zu lassen. Bei einem Wert von 0 % ist das Bild vollständig schwarz. Wenn der Wert 100 % beträgt, erfolgt keine Änderung am Bild. Andere Werte entsprechen linearen Multiplikatoreffekten. Werte über 100 % sind in Ordnung und das Bild wird heller als zuvor. Wenn kein Wert festgelegt ist, ist der Standardwert 1.

 filter: brightness(200%);

3. Kontrastfilter (%)

Passen Sie den Kontrast des Bildes an. Bei einem Wert von 0 % ist das Bild vollständig schwarz. Der Wert beträgt 100 % und das Bild bleibt unverändert. Die Werte können 100 % überschreiten, was bedeutet, dass ein niedrigerer Vergleich verwendet wird. Wenn kein Wert festgelegt ist, ist der Standardwert 1.

 filter: contrast(200%);

4. Der Projektionsfilter (X-Offset-Y-Offset-Unschärfebereichsfarbe) ist dem Box-Shadow-Attribut sehr ähnlich. Der Unterschied besteht darin, dass einige Browser über den Filter eine Hardwarebeschleunigung für eine bessere Leistung bereitstellen.

 filter: drop-shadow(8px 8px 10px red);

5. Graustufenfilter (%)

Konvertieren Sie das Bild in Graustufen. Der Wert definiert den Umfang der Konvertierung. Bei einem Wert von 100 % wird das Bild vollständig in Graustufen umgewandelt, bei einem Wert von 0 % bleibt das Bild unverändert. Wenn nicht festgelegt, ist der Wert standardmäßig 0. Sie können auch Dezimalzahlen zwischen 0 und 1 schreiben.

 filter:grayscale(0.5);

6. Farbtonrotationsfilter (Grad)

Wenden Sie eine Farbtonrotation auf das Bild an. Lassen Sie die Farben im Bild entsprechend im Farbtonkreis rotieren. Wenn der Wert 0 Grad beträgt, ändert sich das Bild nicht. Wenn der Wert nicht festgelegt ist, ist der Standardwert 0 Grad. Obwohl dieser Wert keinen Maximalwert hat, ist ein Wert über 360 Grad gleichbedeutend mit einer erneuten Drehung.

 filter: hue-rotate(90deg);

7. Bildfilter umkehren (%)

Das Eingabebild umkehren. Der Wert definiert den Umfang der Konvertierung. 100 % des Wertes bedeuten eine vollständige Umkehr. Ein Wert von 0 % bedeutet, dass sich das Bild nicht verändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts. Wenn der Wert nicht festgelegt ist, wird der Wert standardmäßig auf 0 gesetzt.

 filter: invert(100%);

8. Transparenzfilter (%)

Die Transparenz des Bildes. Ein Wert von 0 % bedeutet vollständige Transparenz, ein Wert von 100 % bedeutet keine Veränderung des Bildes. Zwischen 0 und 100 % ist es teilweise transparent. Anstelle von % können Sie auch Dezimalzahlen zwischen 0 und 1 verwenden.

Sehr ähnlich zum bestehenden Opazitätsattribut, der Unterschied besteht darin, dass einige Browser über den Filter eine Hardwarebeschleunigung bereitstellen, um die Leistung zu verbessern.

 filter: opacity(30%);

9. Sättigungsfilter (%)

Ein Wert von 0 % bedeutet, dass es vollständig ungesättigt ist, und ein Wert von 100 % bedeutet, dass es keine Veränderung im Bild gibt. Bei einem Wert über 100 % nimmt die Sättigung zu und die Farbe wird kräftiger.

 filter: saturate(800%);

10. Sepiafilter (%)

Konvertieren Sie das Bild in Sepia. Ein Wert von 100 % ergibt ein vollständiges Sepia, und ein Wert von 0 % lässt das Bild unverändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts. Wenn nicht festgelegt, ist der Wert standardmäßig 0.

 filter: sepia(100%);

Verwenden Sie den Code:

&:hover {
          -webkit-filter: opacity(0.5%);
          -o-filter: opacity(0.5);
          -moz-filter: opacity(0.5);
          -ms-filter: opacity(0.5);
          filter: opacity(0.5);
        }

(Lernvideo-Sharing:

CSS-Video-Tutorial

, Web-Frontend)

Das obige ist der detaillierte Inhalt vonWelche Filter werden von CSS3 unterstützt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!