Verschiedene Spezialeffekte des Filters in CSS3
Das Filterattribut in CSS3 kann als einfach, benutzerfreundlich und leistungsstark bezeichnet werden. Diese Effekte werden auf Bilder angewendet, um einige Spezialeffekte zu erzielen (können auch angewendet werden). zum Video, hier nur Bildeffekte besprechen).
Browserkompatibilität
Derzeit ist die Kompatibilität der wichtigsten Browser mit CSS3 sehr gut. Ältere Versionen unter IE9 unterstützen es noch nicht, dies ist jedoch nicht der Fall Der Punkt ist, dass Microsoft bereit ist, auf diese alten Antiquitäten zu verzichten. Darüber hinaus können auch IE-Filter verwendet werden, auf die gesondert eingegangen wird.
Die derzeit in der Spezifikation unterstützten Effekte sind:
Graustufen Der Wert ist eine Dezimalzahl zwischen 0-1
Sepia Der Wert ist eine Dezimalzahl zwischen 0-1
saturate Der Sättigungswert ist num
hue-rotate Der Farbtonrotationswert ist angle
invert Der Invertwert ist eine Dezimalzahl zwischen 0-1
opacity Die Transparenz Der Wert ist eine Dezimalzahl zwischen 0 und 1.
Helligkeit. Der Wert ist eine Dezimalzahl zwischen 0 und 1.
Kontrast. Der Kontrastwert ist Zahl
Schlagschatten-Schatten Die Verwendung ist die Standard-CSS-Schreibmethode, wie zum Beispiel: -webkit-filter: Blur(2px);Der Testbrowser ist Chrom-Browserversion 44.0, der obere Teil des Beispielbildes ist das Originalbild und der untere Teil ist das Bild nach dem Hinzufügen des fünften Effekts.
Graustufen
saturate saturate
Dieses Attribut ändert die Sättigung des Bildes. Der Wertebereich ist 100 %. Das Beispiel ist 800 % (6);hue-rotate Farbtonrotation
hue-rotate wird verwendet, um den Farbton des Bildes zu ändern Der Wert ist der Winkel. Beispiel: -webkit-filter:hue-rotate(180deg)
Umkehrfarbe
Der Effekt der Umkehrung ist dem in etwa ähnlich eines Fotonegativs. Beispiel: -webkit-filter:invert(1)Opazitätstransparenz
Dieses Attribut kommt häufig vor, Beispiel: -webkit- filter:opacity(0.3)Brightness Helligkeit
Ändern Sie die Helligkeit des Bildes, der Standardwert ist 100 %, Beispiel: -webkit-filter: Helligkeit(0,5)Kontrastkontrast
Dieser Attributwert und die Sättigung ähneln Sättigung, Beispiel 500 %: -webkit-filter:contrast(5)blur
Dieses Attribut ändert die Klarheit des Bildes. Der Standardwert ist 0. Beispiel: -webkit-filter:blur(1px)
Schlagschatten-Schatten
Dies ähnelt Box-Shadow und fügt dem Bild Schatten hinzu, Beispiel: -webkit-filter:drop-shadow(10px 10px 10px #000)
Natürlich ist auch das Hinzufügen mehrerer Attribute möglich, Beispiele: -webkit-filter:saturate(10) hue-rotate(500deg) greyscale(0.3) sepia(0.7) context(2.5) invert(0.2) Helligkeit (1,2 );