La capacidad de incrustar imágenes dentro de un mensaje para aparecer cuando los usuarios ven algo hace que HTML sea útil para la comunicación por correo electrónico. Como todo es autónomo, no necesita un servidor web en ningún lugar para alojar la imagen. Los usuarios pueden incrustar cualquier tipo de imagen en un documento HTML, ya sea en forma de .PNG, JPEG y otros.

Este blog explicará:

• Método 1: Cómo incorporar un ".imagen de PNG "en HTML con etiqueta?
• Método 2: Cómo incorporar un ".Imagen de PNG "en HTML con propiedades CSS?

Comencemos con incrustar un .imagen PNG en una página HTML!

Método 1: Cómo incorporar un ".imagen de PNG "en HTML con etiqueta?

Para incrustar un .Imagen PNG en una página HTML, use el "" etiqueta. Luego, inserte el "SRC"Atributo y agregue el".png"Imagen como el"SRC" valor. Para implicaciones prácticas, siga los pasos establecidos a continuación.

Paso 1: Insertar encabezado

Inicialmente, utilice el HTML "

"Etiqueta para agregar un encabezado en el documento HTML.

Paso 2: Diseñe un contenedor Div

A continuación, diseñe un contenedor Div agregando el ""Elemento e inserte un atributo de clase o ID de acuerdo con su elección. Luego, establezca el valor de esta propiedad para su uso posterior.

Paso 3: Agregar ".imagen de png "

Ahora, usa un ""Etiqueta para agregar cualquier tipo de archivo multimedia a la página HTML. Para hacerlo, el "SRC"El atributo se agregó dentro del""Etiqueta, y agregó una imagen PNG como el"SRC" valor. Además, puede aplicar un estilo utilizando el en línea "estilo"Atributo y configuración de las propiedades CSS que desea aplicar:

Empotrar .Imagen de PNG

Se puede observar que la imagen especificada se ha incrustado con éxito:

Método 2: Cómo incorporar un ".Imagen de PNG "en HTML con propiedades CSS?

Para incrustar un ".png"Imagen en una página HTML utilizando propiedades CSS, el"imagen de fondoSe puede utilizar la propiedad. Para implicaciones prácticas, pruebe las instrucciones establecidas.

Paso 1: Agregar encabezado

En HTML, agregue un encabezado con la ayuda de la etiqueta de encabezado de "

" a "

" etiqueta.

Paso 2: crear un contenedor "div"

Entonces, usa el ""Etiqueta para crear un contenedor DIV en un documento HTML:

Empotrar .Imagen de PNG

Producción

Paso 3: Agregar ".imagen de png "

Acceda al contenedor Div utilizando el selector de atributos con un valor de atributo particular como ".Div-Img":

.div-img
Altura: 50%PX;
Ancho: 50%PX;
tamaño de fondo: contener;
IMAGEN DE ANTECEDENTES: URL (/flores de primavera.PNG)

Después de eso, aplique estas propiedades CSS:

• "alto y anchoLas propiedades se utilizan para configurar el tamaño del elemento indicado
• "tamaño de fondo"Especifica el tamaño de la imagen de fondo. Para ese propósito, el valor de esta propiedad se establece como "contener".
• "imagen de fondo"Inserta una imagen usando el"url ()" función.

Producción

Eso se trata de incorporar un ".png"Imagen en una página HTML.

Conclusión

Para incrustar un ".png"Imagen en una página HTML, la"Se utiliza la etiqueta. Luego, agregue el "SRC"Atributo e inserte el".png"Imagen como el valor de"SRC". También puedes utilizar el "imagen de fondo"Propiedad CSS para agregar una".png"Imagen en una página HTML. Este tutorial ha demostrado todo sobre la incrustación del .imagen PNG en una página HTML.