Slipp skygge for PNG -bilde i CSS

En skygge brukes til å sette posisjonen i forhold til objektet og størrelsen. I nettutvikling kan brukere legge til flere skyggeeffekter rundt teksten, bildet, beholderen, tabellen og mange flere. Takket være skyggeeffekter kan publikum anerkjenne de geometriske trekkene til en komplisert mottaker. Disse effektene kan også fjerne tvetydighet fra objektene.

Dette innlegget vil undersøke hvordan du slipper en skygge for et PNG -bilde i CSS.

Hvordan slippe skygge for PNG -bilde i CSS?

For å slippe skyggen for et PNG -bilde i CSS, “filter”CSS -eiendom brukes. Egenskapen "filter" bestemmer de visuelle og grafiske effektene som uskarphet, skygge eller fargeskifte til et element. Mer spesifikt brukes filtre ofte for å justere gjengivelsen for et element.

For å slippe skyggen for en PNG, kan du sjekke de medfølgende instruksjonene.

Trinn 1: Lag en "div" -beholder

Først må du lage en DIV -beholder ved å bruke "" stikkord. Sett også inn et klasseattributt i Div -åpningskoden og spesifiser et bestemt navn for klassen.

Trinn 2: Legg til bilde

Deretter legger du til et bilde ved hjelp av "”Merk og legg til følgende attributter i“ IMG ”-merket:

• “src”Attributt brukes til å sette inn en mediefil inne i elementet.
• “bredde”Bestemmer elementets bredde størrelse.
• “høyde”Brukes til å sette høyden på det definerte elementet:

Det kan observeres at PNG -bildet er lagt til vellykket:

Trinn 3: Slipp skygge for PNG -bilde

Få tilgang til "Div" -beholderen ved hjelp av den tildelte klassenavnet og klasselektoren som ".IMG-Container”. Bruk deretter de under-uttalte egenskapene:

.IMG-Container
Filter: Drop-Shadow (5px 8px 9px RGB (42, 116, 126));
Margin: 60px;
polstring: 30px;
Border: 3px prikket grønn;
Høyde: 200px;
Bredde: 300px;

Her:

• CSS “filter”Eiendom brukes til å legge til den visuelle og grafiske effekten på elementet. For å gjøre det settes verdien av denne egenskapen som "Drop-shadow ()”For å legge skyggen rundt det definerte elementet.
• “Drop-shadow”Eiendom fester en eller flere skygger til et element. Denne egenskapen ligner mest på "Bokseskygge”CSS -eiendom.
• “margin”Bestemmer det tomme rommet rundt elementets ytre side av den definerte grensen.
• “polstring”Brukes til å sette inn plass rundt det definerte elementet inne i grensen.
• “grense”Brukes for å spesifisere grensen rundt elementet.
• “bredde”Og“høyde”Bestem størrelsen på beholderen.

Som et resultat vil skyggen legges til rundt PNG -bildet:

Det handlet om å slippe skygger for PNG -bilder i CSS.

Konklusjon

For å slippe skyggen for PNG -bildet i CSS, oppretter du først en DIV -beholder ved å bruke taggen. Deretter legger du til et bilde med "" stikkord. Få tilgang til elementet i CSS og bruk "filter”CSS -egenskap som brukes til å spesifisere den visuelle effekten rundt elementet. For å gjøre det, sett verdien av denne egenskapen som “Drop-shadow”For å legge til en skygge rundt det definerte elementet. Denne oppskrivningen har vist metoden for å slippe skyggen for et PNG-bilde i CSS.