Come incorporare un .Immagine PNG in una pagina HTML?

Come incorporare un .Immagine PNG in una pagina HTML?

La possibilità di incorporare le immagini all'interno di un messaggio per apparire quando gli utenti visualizzano qualcosa rende HTML utile per la comunicazione e -mail. Dal momento che tutto è autonomo, non è necessario un server web da nessuna parte per ospitare l'immagine. Gli utenti possono incorporare qualsiasi tipo di immagine in un documento HTML, sia nella forma di .png, jpeg e altri.

Questo blog spiegherà:

  • Metodo 1: come incorporare un “.Immagine png "in html con tag?
  • Metodo 2: come incorporare un “.Immagine PNG "in HTML con proprietà CSS?

Iniziamo con l'incorporamento a .Immagine PNG in una pagina HTML!

Metodo 1: come incorporare un “.Immagine png "in html con tag?

Incorporare a .Immagine PNG in una pagina HTML, usa il “"Tag. Quindi, inserire il “src"Attributo e aggiungi il".png"Immagine come il"src" valore. Per implicazioni pratiche, seguire i passaggi indicati di seguito.

Passaggio 1: inserire l'intestazione

Inizialmente, utilizza l'HTML "

"Tag per aggiungere un'intestazione nel documento HTML.

Passaggio 2: Progetta un contenitore div

Successivamente, progettare un contenitore di div aggiungendo il ""Elemento e inserire un attributo di classe o ID secondo la tua scelta. Quindi, imposta il valore di questa proprietà per un uso successivo.

Passaggio 3: aggiungi ".Immagine PNG "

Ora, usa un “"Tag per aggiungere qualsiasi tipo di file multimediale alla pagina HTML. Per farlo, il "src"L'attributo è stato aggiunto all'interno del""Tag e ha aggiunto un'immagine PNG come"src" valore. Inoltre, puoi applicare lo stile usando la linea "stile"Attributo e impostazione delle proprietà CSS che si desidera applicare:

Incorporare .Immagine PNG




Si può osservare che l'immagine specificata è stata incorporata con successo:

Metodo 2: come incorporare un “.Immagine PNG "in HTML con proprietà CSS?

Incorporare un ".png"Immagine in una pagina HTML usando CSS Properties,"immagine di sfondo"La proprietà può essere utilizzata. Per implicazioni pratiche, prova le istruzioni dichiarate.

Passaggio 1: aggiungi l'intestazione

In HTML, aggiungi un'intestazione con l'aiuto del tag di intestazione da "

" A "
"Tag.

Passaggio 2: crea un contenitore "div"

Quindi, usa il ""Tag per creare un contenitore Div in un documento HTML:

Incorporare .Immagine PNG


Produzione

Passaggio 3: aggiungi ".Immagine PNG "

Accedi al contenitore Div utilizzando il selettore degli attributi con un valore di attributo particolare come ".Div-img":

.Div-img
Altezza: 50%PX;
Larghezza: 50%PX;
Size di background: contenere;
Immagina di sfondo: URL (/flussi di primavera.PNG)

Successivamente, applica queste proprietà CSS:

  • "altezza "e" larghezza"Le proprietà sono utilizzate per impostare le dimensioni dell'elemento dichiarato
  • "Size di sfondo"Specifica la dimensione dell'immagine di sfondo. A tale scopo, il valore di questa proprietà è impostato come "contenere".
  • "immagine di sfondo"Inserisce un'immagine usando il"url ()" funzione.

Produzione

Si tratta di incorporare un ".png"Immagine in una pagina HTML.

Conclusione

Incorporare un ".png"Immagine in una pagina HTML,""Il tag viene utilizzato. Quindi, aggiungi il "src"Attributo e inserire il".png"Immagine come valore di"src". Puoi anche utilizzare il "immagine di sfondo"Proprietà CSS per aggiungere un".png"Immagine su una pagina HTML. Questo tutorial ha dimostrato tutto sull'incorporamento del .Immagine PNG in una pagina HTML.