A capacidade de incorporar imagens em uma mensagem para aparecer quando os usuários visualizam algo torna o HTML útil para comunicação por e -mail. Como tudo está independente, você não precisa de um servidor da web em nenhum lugar para hospedar a imagem. Os usuários podem incorporar qualquer tipo de imagem em um documento HTML, seja na forma de .png, jpeg e outros.

Este blog explicará:

• Método 1: Como incorporar um “.imagem png ”em html com tag?
• Método 2: Como incorporar um “.imagem png ”em html com propriedades CSS?

Vamos começar com a incorporação de um .imagem PNG em uma página HTML!

Método 1: Como incorporar um “.imagem png ”em html com tag?

Para incorporar um .Imagem PNG em uma página HTML, use o “" marcação. Então, insira o “src”Atributo e adicione o“.png”Imagem como a“src" valor. Para implicações práticas, siga as etapas declaradas abaixo.

Etapa 1: Insira o cabeçalho

Inicialmente, utilize o html “

”Tag para adicionar um título no documento HTML.

Etapa 2: Projete um contêiner div

Em seguida, projete um contêiner de div, adicionando o “”Elemento e insira um atributo de classe ou identificação de acordo com sua escolha. Em seguida, defina o valor desta propriedade para uso posterior.

Etapa 3: Adicionar “.imagem png ”

Agora, use um “”Tag para adicionar qualquer tipo de arquivo de mídia à página HTML. Para fazer isso, o “srcO atributo foi adicionado dentro do “”Tag, e adicionou uma imagem PNG como a“src" valor. Além disso, você pode aplicar o estilo usando o embutido “estilo”Atributo e definir as propriedades CSS que você deseja aplicar:

Embutir .Imagem PNG

Pode -se observar que a imagem especificada foi incorporada com sucesso:

Método 2: Como incorporar um “.imagem png ”em html com propriedades CSS?

Para incorporar um “.png”Imagem em uma página HTML usando propriedades CSS, o“imagem de fundo”A propriedade pode ser utilizada. Para implicações práticas, experimente as instruções declaradas.

Etapa 1: Adicionar cabeçalho

No HTML, adicione um título com a ajuda da tag de título de “

" para "

" marcação.

Etapa 2: Crie um contêiner "div"

Então, use o “”Tag para criar um contêiner div em um documento HTML:

Embutir .Imagem PNG

Saída

Etapa 3: Adicionar “.imagem png ”

Acesse o contêiner Div usando o seletor de atributos com um valor de atributo específico como “.Div-img”:

.Div-IMG
Altura: 50%PX;
Largura: 50%PX;
tamanho de fundo: conter;
Imagem de fundo: URL (/flor de mola.png)

Depois disso, aplique estas propriedades do CSS:

• ““altura "e" largura”As propriedades são utilizadas para definir o tamanho do elemento declarado
• ““tamanho de fundo”Especifica o tamanho da imagem de fundo. Para esse fim, o valor desta propriedade é definido como “conter”.
• ““imagem de fundo”Insere uma imagem usando o“url ()”Função.

Saída

Isso se trata de incorporar um “.png”Imagem em uma página HTML.

Conclusão

Para incorporar um “.png”Imagem em uma página HTML, a“ “”A tag é utilizada. Então, adicione o “src”Atribua e insira o“.png”Imagem como o valor de“src”. Você também pode utilizar o “imagem de fundo”Propriedade CSS para adicionar um“.png”Imagem em uma página HTML. Este tutorial demonstrou tudo sobre incorporar o .imagem PNG em uma página HTML.