Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Verschiedene Spezialeffekte des Filters in CSS3

高洛峰
Freigeben: 2016-10-09 14:03:23
Original
1426 Leute haben es durchsucht

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

Wenn dieser Effektparameter keinen Wert enthält, wird er mit 100 % gerendert. Das folgende Beispiel ist 100 % Rendering: -webkit-filter:grayscale(1); Der Effekt der Nostalgiefunktion, der Wert ist ebenfalls 0-1, -webkit-filter:sepia(1);

saturate saturateVerschiedene Spezialeffekte des Filters in CSS3

Dieses Attribut ändert die Sättigung des Bildes. Der Wertebereich ist 100 %. Das Beispiel ist 800 % (6);

hue-rotate Farbtonrotation Verschiedene Spezialeffekte des Filters in CSS3

hue-rotate wird verwendet, um den Farbton des Bildes zu ändern Der Wert ist der Winkel. Beispiel: -webkit-filter:hue-rotate(180deg)

UmkehrfarbeVerschiedene Spezialeffekte des Filters in CSS3

Der Effekt der Umkehrung ist dem in etwa ähnlich eines Fotonegativs. Beispiel: -webkit-filter:invert(1)

OpazitätstransparenzVerschiedene Spezialeffekte des Filters in CSS3

Dieses Attribut kommt häufig vor, Beispiel: -webkit- filter:opacity(0.3)

Brightness HelligkeitVerschiedene Spezialeffekte des Filters in CSS3

Ändern Sie die Helligkeit des Bildes, der Standardwert ist 100 %, Beispiel: -webkit-filter: Helligkeit(0,5)

Kontrastkontrast Verschiedene Spezialeffekte des Filters in CSS3

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)

Verschiedene Spezialeffekte des Filters in CSS3

Schlagschatten-Schatten

Dies ähnelt Box-Shadow und fügt dem Bild Schatten hinzu, Beispiel: -webkit-filter:drop-shadow(10px 10px 10px #000)

Verschiedene Spezialeffekte des Filters in CSS3

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 );

1Verschiedene Spezialeffekte des Filters in CSS3

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!