Schatten Sie den Schatten für PNG -Bild in CSS

Ein Schatten wird verwendet, um die Position relativ zum Objekt und zur Größe festzulegen. In der Webentwicklung können Benutzer mehrere Schatteneffekte um den Text, das Bild, den Container, die Tabelle und vieles mehr hinzufügen. Dank der Schatteneffekte kann das Publikum die geometrischen Merkmale eines komplizierten Empfängers anerkennen. Diese Effekte können auch Unklarheiten aus den Objekten entfernen.

In diesem Beitrag wird untersucht, wie man einen Schatten für ein PNG -Bild in CSS fallen lässt.

Wie man Schatten für PNG -Bild in CSS fallen lässt?

Um den Schatten für ein PNG -Bild in CSS fallen zu lassen, das “FilterCSS -Eigenschaft wird verwendet. Die Eigenschaft „Filter“ bestimmt die visuellen und grafischen Effekte wie Unschärfe, Schatten oder Farbverschiebung zu einem Element. Insbesondere werden Filter häufig verwendet, um das Rendering für ein Element anzupassen.

Schauen Sie sich die angegebenen Anweisungen an, um den Schatten für eine PNG fallen zu lassen.

Schritt 1: Machen Sie einen Div -Container

Erstellen Sie zunächst einen DIV -Behälter mit der “" Schild. Fügen Sie außerdem ein Klassenattribut in das DIV -Eröffnungs -Tag ein und geben Sie einen bestimmten Namen für die Klasse an.

Schritt 2: Bild hinzufügen

Fügen Sie als nächstes ein Bild mit Hilfe des “hinzu“Tag und fügen Sie die folgenden Attribute im Tag "IMG" hinzu:

• “srcDas Attribut wird zum Einfügen einer Mediendatei in das Element verwendet.
• “Breite”Bestimmt die Breite des Elements.
• “Höhe”Wird verwendet, um die Höhe des definierten Elements festzulegen:

Es kann beobachtet werden, dass das PNG -Bild erfolgreich hinzugefügt wurde:

Schritt 3: Schatten für PNG -Bild fallen

Greifen Sie mit Hilfe des zugewiesenen Klassennamens und der Klassenauswahl als "DIV" -Container zu "zu".IMG-Container”. Wenden Sie dann die folgenden Eigenschaften an:

.Img-Container
Filter: Drop-Shadow (5px 8px 9px RGB (42, 116, 126));
Rand: 60px;
Polsterung: 30px;
Grenze: 3px gepunktetes grün;
Höhe: 200px;
Breite: 300px;

Hier:

• Das CSS “FilterEigenschaft wird verwendet, um den visuellen und grafischen Effekt auf das Element hinzuzufügen. Dazu wird der Wert dieser Eigenschaft als "festgelegt" festgelegt "Drop-Shadow ()”Zum Hinzufügen des Schattens um das definierte Element.
• “Drop-ShadowDie Eigenschaft erhält einen oder mehrere Schatten an ein Element. Diese Eigenschaft ähnelt dem "am ähnlichsten"Box Schatten”CSS -Eigenschaft.
• “Rand”Bestimmt den leeren Raum um die Außenseite des Elements der definierten Grenze.
• “Polsterung”Wird verwendet, um Platz um das definierte Element innerhalb der Grenze einzulegen.
• “Grenze”Wird verwendet, um die Grenze um das Element anzugeben.
• Der "Breite" Und "Höhe”Bestimmen Sie die Größe des Behälters.

Infolgedessen wird der Schatten um das PNG -Bild hinzugefügt:

Das ging darum, Schatten für PNG -Bilder in CSS fallen zu lassen.

Abschluss

Um den Schatten für das PNG -Bild in CSS zu fallen, erstellen Sie zunächst einen DIV -Container mithilfe des Tags. Fügen Sie als nächstes ein Bild mit dem hinzu “" Schild. Greifen Sie dann auf das Element in CSS zu und wenden Sie das an “anFilter”CSS -Eigenschaft, die verwendet wird, um den visuellen Effekt um das Element anzugeben. Setzen Sie dazu den Wert dieser Eigenschaft als “Drop-Shadow”Um das definierte Element um einen Schatten hinzuzufügen. Diese Beschreibung hat die Methode zum Ablegen des Schattens für ein PNG-Bild in CSS gezeigt.