So fügen Sie Bildern in CSS Filter und Reflexionen hinzu?

Das Aussehen einer Website ist sehr wichtig, wenn Sie beabsichtigen, immer mehr Publikum auf Ihre Website zu locken. Daher wird daher sehr empfohlen, um das allgemeine Erscheinungsbild einer Website -Addition von grafischen Effekten zu Bildern oder reflektierenden Bildern zu verbessern. CSS bietet verschiedene Eigenschaften, mit denen Sie diese Aufgaben mühelos erfüllen können. Wir haben diese Eigenschaften in diesem Artikel ausführlich besprochen. In diesem Beitrag haben wir Folgendes besprochen.

1. Bildfilter in CSS
2. Bildreflexionen in CSS

Bildfilter in CSS

Zum Zweck des Hinzufügens verschiedener Spezialeffekte zu einem Bild wie Deckkraft, Unschärfe, Sättigung usw. wird die CSS -Filtereigenschaft verwendet.

Syntax

Filter: Wert;

Die verschiedenen Methoden, die mit der Filtereigenschaft verbunden sind.

Wert	Beschreibung
keiner	Dieser Wert fügt keinen Effekt hinzu und ist ein Standardwert.
verwischen	Es verleiht dem Bild Unschärfe und macht den Wert in Pixeln den Wert.
Helligkeit	Es wird verwendet, um die Helligkeit eines Bildes zu erhöhen oder zu verringern und Werte im Prozentsatz zu zeigen.
Kontrast	Dieser Wert stimmt den Kontrast eines Bildes ab und die Werte werden in Prozent definiert.
Graustufen	Es transformiert ein Bild in ein Graustufenbild und zeigt auch Werte in Prozentsatz.
Hue-rotate	Dieser Wert wird verwendet, um ein Bild zu drehen und Werte in Grad zu rendern.
umkehren	Es umdreht die im Bild existierenden Proben, und die Werte werden in Prozent definiert.
Opazität	Dieser Wert passt die Transparenz eines Bildes an und nimmt Werte von 0 bis 1 an.
sättigen	Es sättigt ein Bild, indem es Werte im Prozentsatz nimmt.
Sepia	Dieser Wert wird verwendet, um ein Bild in Sepia umzuwandeln und Werte im Prozentsatz aufweisen.
Drop-Shadow	Es wird verwendet, um einen Schatteneffekt auf das Bild anzuwenden.
URL ()	Es ist eine Funktion, die den Standort eines XML.
Initial	Dieser Wert gibt der Eigenschaft ihren ursprünglichen Wert an.
erben	Dieser Wert erbt die Filtereigenschaft aus dem Vorfahrelement.

Nachdem Sie nun alle Werte kennen, die eine Filtereigenschaft aufweisen kann, haben wir im Folgenden diese Werte für ein besseres Verständnis demonstriert.

Fügen wir in erster Linie ein Bild zu unserer Webseite mit grundlegendem HTML hinzu.

Html

Hier haben wir einfach ein Bild mit dem Tag hinzugefügt.

CSS

img
Breite: 30%;
Höhe: Auto;

Jetzt verwenden wir grundlegende CSS, um dem Bild eine gewisse Breite und Höhe zu verleihen.

Ausgang

Das Bild wurde zur Webseite hinzugefügt.

Wenden wir nun Filter auf dieses Bild an und untersuchen die verschiedenen Werte, die die Filtereigenschaft ausstellen kann.

Verwischen

Wir haben den Unschärfeneffekt auf 2PX eingestellt. Der mehr Wert der Unschärfemethode erhöht die Unschärfe.

.verwischen
Filter: Blur (2px);

Ausgang

Dies ist ein verschwommenes Bild.

Helligkeit

Die Helligkeit des Bildes wurde auf 0 gesetzt.50. Eine Verringerung des Wertes führt zu einem Rückgang der Helligkeit und umgekehrt.

.Helligkeit
Filter: Helligkeit (0.50);

Ausgang

Die Helligkeit des Bildes wurde erfolgreich eingestellt.

Kontrast

Wir haben den Kontrast des Bildes auf 160% gesetzt. Wenn Sie den Kontrast erhöhen möchten, erhöhen Sie den Wert so viel wie Sie möchten.

.Kontrast
Filter: Kontrast (160%);

Ausgang

Ein Kontrasteffekt wurde mit großer Leichtigkeit hinzugefügt.

Graustufen

Geben wir der GraysCale () -Methode einen gewissen Wert an und sehen Sie die Änderungen im Bild an.

.Graustufen
Filter: Graustufen (100%);

Ausgang

Ein farbiges Bild wurde unter Verwendung der Grayscale () -Methode der Filtereigenschaft in ein Schwarzweißbild umgewandelt.

Hue-rotate

Wir weisen die Hue-Rotate () -Methode 270 Grad zu. Diese Methode modifiziert die Bilder im Grunde genommen, indem Sie das Bild um den Farbkreis drehen.

.Hue-rotate
Filter: Hue-rotate (270 Grad);

Ausgang

Dies ist ein Bild mit Farbton-Rotation von 270 Grad.

Umkehren

Der Invertwert verleiht dem Bild einen gewissen Spezialeffekt, indem es es invertiert. Hier invertieren wir das Bild zu 80%.

.invertieren
Filter: Invert (80%);

Ausgang

Die Bilderproben wurden umgekehrt.

Opazität

Um ein Bild transparenter Opazitätswert zu machen, wird verwendet. Im Folgenden passen wir die Deckkraft des Bildes auf 0 an.4. Je weniger der Wert der Opazität, desto mehr wird das Bild transparent.

.Opazität
Filter: Deckkraft (0.4);

Ausgang

Dies ist ein Bild mit 40% Transparenz.

Sättigen

Um Sättigung hinzuzufügen, wird die Methode der Filtereigenschaft Sättigung () verwendet. Je mehr der Wert ist, desto mehr wird die Sättigung des Bildes sein.

.sättigen
Filter: gesättigt (4);

Ausgang

Die Sättigungseffekt wurde erfolgreich zum Bild hinzugefügt.

Sepia

Geben Sie ihm einen gewissen Wert so, wie wir es 50% im folgenden Code -Snippet zugewiesen haben.

.Sepia
Filter: Sepia (50%);

Ausgang

Der Sepia -Effekt funktioniert ordnungsgemäß.

Drop-Shadow

Um einen Schatten hinzuzufügen, verwenden wir die Drop-Shadow-Methode. Die Länge des Schattens wurde jeder Seite des Bildes zugeordnet.

.Schatten
Filter: Drop-Shadow (8px 8px 10px rot);

Ausgang

Der Drop-Shadow-Effekt wurde erfolgreich hinzugefügt.

Nachdem wir nun über die filterische Eigenschaft ausführlich gelernt haben, gehen wir vorwärts und sehen, was reflektiertes Eigentum ist.

Bildreflexionen in CSS

Zur Reflexion von Bildern wird die CSS-Box-Reflect-Eigenschaft verwendet.

Syntax

-webkit-box-reflect: unten | über | rechts | links;

Damit diese Eigenschaft in verschiedenen Browsern voll funktionsfähig ist, wird sie mit einem Präfix „-Webkit-“ verwendet.

Notiz: Der Firefox-Browser unterstützt die Box-Reflect-Eigenschaft nicht.

Im Folgenden haben wir einige dieser Werte mit Hilfe relevanter Beispiele demonstriert, damit Sie das Konzept der Bildreflexion erfassen können.

Fügen wir zuerst ein Bild zu unserer Webseite hinzu.

Html

Hier haben wir ein Bild hinzugefügt und ihm eine gewisse Breite und Höhe gegeben.

Ausgang

Ein Bild wurde in die Webseite eingefügt.

Unter

Weisen Sie einfach den Wert „unten“ der Box-Reflect-Eigenschaft zu, um ein Bild unterhalb des Originalbildes zu reflektieren.

img
-webkit-box-reflect: unten;

Ausgang

Das Bild wurde unten reflektiert.

Rechts

Lassen Sie uns den „richtigen“ Wert der Box-Reflect-Eigenschaft untersuchen.

img
-Webkit-Box-Reflect: Right;

Ausgang

Das Bild wurde dem rechten erfolgreich reflektiert.

Abschluss

Zum Zweck des Hinzufügens von Spezialeffekten zu den Bildern, die auf Websites erscheinen, wird die CSS -Filtereigenschaft verwendet. Verschiedene Methoden, die diese Eigenschaft ausstellen kann; Graustufe (), Sättigung (), Opazität (), Blur (), Helligkeit (), Hue-rootate () usw. Neben dem Hinzufügen von Spezialeffekten können Sie auch Bilder mit der CSS-Box-Reflect-Eigenschaft nach rechts, links, oben oder unten reflektieren. Dieser Beitrag deckt alle Tiefen des Hinzufügens von Filtern oder Reflexionen zu Bildern mit Hilfe relevanter Beispiele ab.