Muligheten til å legge inn bilder i en melding som vises når brukere ser noe, gjør HTML nyttig for e -postkommunikasjon. Siden alt er selvstendig, trenger du ikke en webserver noe sted for å være vert for bildet. Brukere kan legge inn alle typer bilder i et HTML -dokument, enten det er i form av .PNG, JPEG og andre.

Denne bloggen vil forklare:

• Metode 1: Hvordan legge inn en “.PNG ”-bilde i HTML med tag?
• Metode 2: Hvordan legge inn en “.PNG ”-bilde i HTML med CSS -egenskaper?

La oss komme i gang med å legge inn en .PNG -bilde til en HTML -side!

Metode 1: Hvordan legge inn en “.PNG ”-bilde i HTML med tag?

Å legge inn en .PNG -bilde til en HTML -side, bruk "" stikkord. Sett deretter inn "src”Attributt og legg til“.png”Bilde som“src”Verdi. Følg trinnene som er angitt nedenfor for praktiske implikasjoner.

Trinn 1: Sett inn overskrift

Til å begynne med, bruk HTML “

”Tag for å legge til en overskrift i HTML -dokumentet.

Trinn 2: Design en div container

Deretter designer du en div container ved å legge til “”Element og sett inn en klasse- eller ID -attributt i henhold til ditt valg. Sett deretter verdien av denne egenskapen for senere bruk.

Trinn 3: Legg til “.PNG ”-bilde

Nå, bruk en "”Tag for å legge til hvilken som helst type mediefil på HTML -siden. For å gjøre det, “src”Attributt ble lagt til i“”Tag, og la til et PNG -bilde som“src”Verdi. Videre kan du bruke styling ved å bruke inline “stil”Attributt og sette CSS -egenskapene som du vil bruke:

Innebygd .PNG -bilde

Det kan observeres at det spesifiserte bildet er innebygd vellykket:

Metode 2: Hvordan legge inn en “.PNG ”-bilde i HTML med CSS -egenskaper?

Å legge inn en “.png”Bilde til en HTML -side ved hjelp av CSS -egenskaper,“bakgrunnsbilde”Eiendom kan brukes. For praktiske implikasjoner, prøv de uttalte instruksjonene.

Trinn 1: Legg til overskrift

I HTML, legg til en overskrift ved hjelp av overskriftskoden fra “

" til "

" stikkord.

Trinn 2: Lag en "div" -beholder

Bruk deretter “”Tag for å opprette en DIV -beholder i et HTML -dokument:

Innebygd .PNG -bilde

Produksjon

Trinn 3: Legg til “.PNG ”-bilde

Få tilgang til DIV -beholderen ved å bruke attributtvelgeren med en bestemt attributtverdi som “.Div-img”:

.div-img
Høyde: 50%PX;
Bredde: 50%px;
Bakgrunnsstørrelse: Inneholder;
Bakgrunnsbilde: URL (/Spring-Flowers.png)

Etter det, bruk disse CSS -egenskapene:

• “høyde ”og“ bredde”Egenskaper brukes til å sette størrelsen på det angitte elementet
• “bakgrunnsstørrelse”Angir størrelsen på bakgrunnsbildet. For det formålet er verdien av denne egenskapen satt som “inneholde”.
• “bakgrunnsbilde”Setter inn et bilde ved å bruke“URL ()”Funksjon.

Produksjon

Det handler om å legge inn en “.png”Bilde til en HTML -side.

Konklusjon

Å legge inn en “.png”Bilde til en HTML -side,“”Tag brukes. Deretter legger du til “src”Attributt og sett inn“.png”Bilde som verdien av“src”. Du kan også bruke "bakgrunnsbilde”CSS -eiendom for å legge til en“.png”Bilde på en HTML -side. Denne opplæringen har demonstrert alt om å legge inn .PNG -bilde til en HTML -side.