Bildanpassung mit CSS-Filtereffekten
Bild anpassen Helligkeit und Kontrast, oder Bild in verwandeln Graustufen oder Sephia Diese Funktion wird häufig in Bildbearbeitungsanwendungen verwendet Photoshop. Es ist jetzt jedoch möglich, Web-Bildern mit CSS die gleichen Effekte hinzuzufügen.
Diese Funktion kommt von den Filtereffekten, die sich eigentlich noch im Arbeitsentwurf befinden. Der Webkit-Browser scheint jedoch ein Schritt in Richtung Implementierung dieser Funktion zu sein.
Also, versuchen wir es einmal und wir werden dieses Bild von Mehdi Kh verwenden, um die Effekte zu demonstrieren.
Die Effekte
Das Anwenden der Effekte ist sehr einfach. Sehen Sie sich den Ausschnitt unten an, um Bilder in Bilder umzuwandeln Graustufen;
img -Webkit-Filter: Graustufen (100%);
… Und das ist für Sepia ala Instagram.
img -Webkit-Filter: Sepia (100%);
Beide Sepia und das Graustufen Werte sind in Prozent angegeben, wobei 100% ist das Maximum und gilt 0% bleibt das Bild unverändert, aber wenn der Wert nicht explizit angegeben wird, 100% wird als Standard verwendet.
Das Aufhellen des Bildes ist ebenfalls möglich, und wir können es mit der Helligkeit Funktion wie folgt;
img -Webkit-Filter: Helligkeit (50%);
Der Helligkeitseffekt funktioniert wie der Kontrast- und der Sepia-Effekt oberhalb des Werts von 0% behält das Bild bei, wie es ist und angewendet wird 100% hellt das Bild vollständig auf, wodurch möglicherweise nur eine leere weiße Seite anstelle eines Bildes angezeigt wird.
Der Helligkeitseffekt auch erlaubt negative Werte, in dem es wird dunkle das Bild ab.
img -Webkit-Filter: Helligkeit (-50%);
… Und wir können den Bildkontrast auf diese Weise anpassen.
img -Webkit-Filter: Kontrast (200%);
Es gibt einen kleinen Unterschied in Bezug auf die Funktionsweise des Werts. Wie Sie oben sehen können, legen wir den Wert fest Kontrast() durch 200%, Dies ist weil der Wert von 100% ist der Ausgangspunkt, an dem das Bild unverändert bleibt. Wenn der Wert darunter liegt 100%, Sagen wir 50%, wird das Bild weniger kontrastiert.
Außerdem können wir den Effekt auch in einem Deklarationsblock kombinieren, wie im Beispiel unten. Wir machen das Bild in Graustufen und erhöhen die Kontrast gleichzeitig um 50%.
img -Webkit-Filter: Graustufen (100%) Kontrast (150%);
Durch die Kombination des Filters mit dem CSS3-Übergang können wir eine Grazie schaffen schweben bewirken.
img: hover -Webkit-Filter: Graustufen (0%); img: hover -webkit-filter: Sepia (0%); img: hover -webkit-filter: Helligkeit (0%); img: hover -webkit-filter: Kontrast (100%);
Schließlich gibt es noch einen Effekt, den wir ausprobieren können. das Gaußscher Weichzeichner, was das Zielelement verwischen wird.
img: hover -webkit-filter: blur (5px);
Wie in Photoshop wird der Unschärfewert in Pixelradius angegeben. Wenn der Wert nicht explizit angegeben wird, wird die 0 als Standardwert verwendet und das Bild bleibt unverändert.
Letzter Gedanke
Es gibt tatsächlich mehr Effekte in der Spezifikation. sowie Farbton drehen, umkehren und sättigen, Ich denke jedoch, dass sie in echten Web-Fällen weniger angewendet werden. Die Diskussion beschränkte sich daher auf nur vier Effekte.
Obwohl die Diskussion in diesem Lernprogramm auf Bilder angewendet wird, kann die Eigenschaft auch auf jedes Element im DOM angewendet werden.
Abschließend können Sie die Live-Demo über diese Links anzeigen. Bitte beachten Sie, dass der Filter derzeit nur in unterstützt wird Chrome 19 und darüber.
- Demo
- Quelle herunterladen
